深入了解eslint

我们在学一个东西之前，必须清楚的知道它是干什么的，怎么用？之后我们才能将它融会贯通，学以致用

JavaScript的编程风格

在前端工程愈演愈大的情况下，JavaScript占的比例也很足，需要良好的书写风格，才能在多人协作code时提高效率，何况代码还是需要人来读的，所以可读性、可维护性高的代码很多时候有重要意义。这个时候我们的eslint横空出世

什么是 EsLint

ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。换句话说，即使我们看了无数遍上面说到的Airbnb的JavaScript的编程风格，但是，不少情况下还是会写出不符合要求的代码，那么就需要工具来约束我们。我们通过配置一些风格，让IDE来强制提醒我们代码的风格是否符合规范，所以eslint就是很好的选择，但是eslint还需要和IDE的结合来使用。

知道了它是什么，接下来就是学习它是怎样使用的了

快速上手

前提：Node.js(>=12.0.0) 且项目目录中存在 package.json 文件

eslint是一个node的包，需要类似npm、yarm来安装，也和其他的第三方包一样，可以全局安装，也可以本地安装

安装

1	npm install --save-install eslint

初始化

1
2
3

npx eslint --init

# 注：npx 表示从当前路径下查找命令，即 ./node_modules/.bin/eslint --init

需要配置，可以选择一个流行的风格，Airbnb或者标准，生成JSON文件，.eslintrc.json这个配置文件，
需要注意，win10在git ui的命令窗口执行的话无法使用箭头按键来选择，所以最好还是使用win自带的cmd窗口

接下来就会生成.eslint.*配置文件

/* 
$ npx eslint --init
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · standard
✔ What format do you want your config file to be in? · JSON
*/

// 上面的回答对应下面的 .eslint.json 文件

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["plugin:react/recommended", "standard"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {}
}

在 VSCode 中使用

vscode是一个微软开源的编辑器，很多插件可以辅助，这个eslint就是一个插件，安装eslint插件，安装插件后，会检测打开的工程是否存在一个eslint的配置文件，存在的话就会执行eslint的检测，不存在的话就不会检测。

首先，安装 VSCode ESlint 插件。需要注意，插件并不内置 ESLint 核心代码，而是自动查找项目中的 ESLint 库，在用户每次输入时调用lint命令，并在编辑器中标记代码问题，文档这样说明：

1	The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn't provide one the extension looks for a global install version.

这样的好处是，编辑器能兼容不同项目中不同版本的 ESLint，同时，能保证同一项目中，团队成员的 ESLint 版本一致。

如果希望在每次保持时，自动 fix 可修复问题，可以在 VSCode 中设置保存时 fix：

/*
* VSCode Settings JSON File
*/
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}

更多详细配置可前往官网查看