前言：我为什么要专门看下ESLint？
最近使用Vue脚手架创建了项目，使用到了ESLint，并且也安装了ESlint插件，在保存时自动lint代码。但是发现每次保存的时候都会有错，然后根据提示修改了代码，再次保存时代码又变了，又报错，于是决定花一些时间了解下ESLint。
1.什么是ESLint
ESLint官网地址：https://zh-hans.eslint.org/
ESLint是一个根据方案识别并报告ES/JS代码问题的工具，其目的是使代码风格更加一致并避免错误，帮你编写更加干净、可靠的代码。
ESLint具有高度可配置性，允许你定义自己的编码风格规则，或者选择各种预配置的规则集，比如：Airbnb\Google\Standard。也可以根据项目的具体需求自定义ESLint，强制执行一致的代码风格。
通过上面的简介，大概已经明白了ESLint的好处。并且现在的企业级项目开发中，都会使用ESLint来规范团队开发。
2. 安装使用
2.1 在项目中安装ESLint
执行以下命令进行安装和配置，在选择一些配置之后，就会在项目中导入ESLint:
npm init @eslint/config
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ 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? · JavaScript
Checking peerDependencies of eslint-config-standard@latest
Local ESLint installation not found.
The config that you've selected requires the following dependencies:
eslint-plugin-vue@latest eslint-config-standard@latest eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 || ^16.0.0 eslint-plugin-promise@^6.0.0
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm
Installing eslint-plugin-vue@latest, eslint-config-standard@latest, eslint@^8.0.1, eslint-plugin-import@^2.25.2, eslint-plugin-n@^15.0.0 || ^16.0.0 , eslint-plugin-promise@^6.0.0
added 211 packages, and audited 212 packages in 12s
91 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Successfully created .eslintrc.js file in /Users/xxx/Desktop/ESLintStudy
2.2 配置
在运行完npm init @eslint/config之后，项目目录下会有.eslintrc.{js,yml,json} 文件，我的是有个.eslintrc.js文件：
如果我们想要自定义一些规则，就需要修改这个文件的配置了。
2.3 执行eslint
我们先建立一个测试的js文件，代码格式很随性：
function test(params) {
let a=10;
let b = 10+1
console.log(b);
}
如果保存时自动格式化了，我们需要在设置中搜索格式化，将VSCode中的配置关闭：
VSCode这个的规则可能跟ESLint的规则不一样，所以保存的时候可能会按照VSCode默认的代码格式规则进行修改，但是又不满足ESLint的规则，所以就遇到了顶部的那个奇葩问题。
🤔不知道这个配置是否正确，如果有大佬了解，可以指点一下。
然后我们使用npx eslint hello.js检查代码，4行代码，居然有14个错误：
$ npx eslint hello.js
1:10 error 'test' is defined but never used no-unused-vars
1:14 error Missing space before function parentheses space-before-function-paren
2:1 error Expected indentation of 2 spaces but found 4 indent
2:9 error 'a' is assigned a value but never used no-unused-vars
2:9 error 'a' is never reassigned. Use 'const' instead prefer-const
2:10 error Operator '=' must be spaced space-infix-ops
2:13 error Extra semicolon semi
3:1 error Expected indentation of 2 spaces but found 4 indent
3:9 error 'b' is never reassigned. Use 'const' instead prefer-const
3:12 error Multiple spaces found before '10' no-multi-spaces
3:19 error Operator '+' must be spaced space-infix-ops
4:1 error Expected indentation of 2 spaces but found 4 indent
4:19 error Extra semicolon semi
5:2 error Newline required at end of file but not found eol-last
✖ 14 problems (14 errors, 0 warnings)
12 errors and 0 warnings potentially fixable with the `--fix` option.
根据这些错误，我们就可以根据提示信息，修改我们的代码了。
这里为什么使用npx？
因为我们并没有在全局安装ESLint，所以是没有eslint这个命令的，需要使用npx。npx是npm5.2引入的工具，可以临时安装可执行依赖包，并且执行依赖包中的命令，安装完成之后会自动运行，用完后会删除。
3.ESLint扩展安装
我们肯定不想每次敲完代码都手动执行检查命令，如果我们开发时能够在文件保存时自动按照配置的ESLint规则格式化代码，这样就能够大大的提高开发效率了，我们可以使用VSCode中的ESLint插件来实现此需求。
在VSCode的扩展面板中直接搜索ESLint，然后安装下载量最多的那个即可：
3.1 开启自动保存修复
每次修改完代码，可以在保存的时候对代码进行修复，Mac下点击Code -> 首选项 -> 设置 打开设置页面：
然后选择用户 -> 扩展 -> ESLint -> 打开setting.json文件：
添加以下配置，设置该配置项仅为ESLint打开：
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
如下图所示：
可能在其他文章，关于这个配置有一些不同，这是因为ESLint插件的版本不同，我们可以在其插件的介绍或者github中看到相关的说明，使用最新的配置即可：https://github.com/Microsoft/vscode-eslint。
4.忽略指定文件和目录
如果项目中有些文件或者目录不希望让ESLint去做校验，可以在根目录下创建.eslintignore文件，来告诉ESLint跳过校验，比如忽略dist文件中的代码，参考：https://zh-hans.eslint.org/docs/latest/use/configure/ignore：
dist/*
public/*.js
除了这种针对文件或者文件夹忽略的方式，还可以通过在代码中加入注释来告诉ESLint是否需要校验代码：
/* eslint-disable */ // 文件最顶部,整个文件都不校验
console.log('Hello Word')
/* eslint-disable */
console.log('Hello Word')
/* eslint-enable */ // 忽略被注释包起来的代码
/* eslint-disable no-console */
console.log('Hello Word') // 全局针对指定规则进行禁用
// 只针对当前行 eslint-disable-next-line 后跟规则
console.log('Hello Word') // eslint-disable-next-line no-console
// eslint-disable-next-line no-console
console.log('Hello Word')
5. ESLint基础配置
5.1 rules
规则是 ESLint 的核心构建模块。规则验证你的代码是否符合某个期望，以及如果不符合该期望该怎么做。规则还可以包含针对该规则的额外配置选项。
如果想要改变规则的设置，需要把规则ID设置为以下值：
- off 或 0，关闭规则
- warn 或 1，启用并视作警告
- error 或 2，启用并视作错误
通常会将规则设置为error，以便在集成测试、pre-commit检查和拉取请求合并中强制遵守规则。
5.1.1 使用配置注释
在下边这个例子中，关闭eqeqeq，启用了curly并视作错误：
/* eslint eqeqeq: "off", curly: "error" */
还可以增加一些注释描述，解释为什么注释是必要的：
/* eslint eqeqeq: "off", curly: "error" -- Here's a description about why this configuration is necessary. */
5.1.2 使用配置文件
要在配置文件中配置规则，则使用rules键和一个错误级别以及任何想要使用的选项，比如：
{
"rules": {
"eqeqeq": "off",
"curly": "error",
"quotes": ["error", "double"]
}
}
上面只是按照官方文档截取的一些基础配置，更完善的配置可以看：
- 配置规则：https://zh-hans.eslint.org/docs/latest/use/configure/rules
- 所有规则参考：https://zh-hans.eslint.org/docs/latest/rules/
关于ESLint的其它配置，可以在有需要的时候查看官方文档进行配置，这里只学习最基础的ESLint的使用，不深入研究了，毕竟面试时也没人会问这个吧。。。
6. Vue脚手架中使用
在使用Vue-CLI创建项目时，可以选择配置ESLint，一共有三个相关的配置，如下
// 使用Standard（标准）的配置
Pick a linter / formatter config: Standard
// 在保存文件时进行Lint
Pick additional lint features: Lint on save
// 使用单独的文件存储ESLint的配置
Where do you prefer placing config for Babel, ESLint, etc.:In dedicated config
等项目创建完成，Vue-CLI会自动的帮我们引入和配置ESLint：
然后可以根据自己的开发习惯或者公司的规范进行配置了。
