最初配置 eslint 的时候，一直对各个配置项看的迷迷糊糊。
动不动就复制粘贴个别人配好的规则过来，很多东西的含义却朦朦胧胧。
因为网上少见对eslint配置项的详解，这里详细说明，确保everyone都可以详细理解这些配置项的含义。
给小白的贴心讲解，请叫我勤劳的小蜜蜂🐝
本文以配置 .eslintrc.js 为例。
下面，请打开你已经创建好的 .eslintrc.js，我们一起，一步一步操作，一项一项配置。
1、parserOptions
解析器选项。指定你想支持的语言，默认支持es5。指定啥语言，eslint就按照啥语法检查。
直接看咋写：
如果需要检查 es6 代码：
module.exports = {
parserOptions: {
ecmaVersion: 6 // 支持es6语法（但不支持新的 ES6 全局变量或类型，如Set）
},
env: {
es6: true // 这样设置之后，就支持新的 ES6 全局变量和类型了 ┓( ´∀` )┏
}
}
如果需要检查 React 代码：
（1）安装插件：
yarn add eslint-plugin-react
（2）配置 .eslintrc.js：
module.exports = {
parserOptions: {
ecmaFeatures: {
jsx: true
}
},
plugins: ['react']
}
各个 key 的含义：
·ecmaVersion：按照 ecma 哪个版本语法做检查
·sourceType：默认是 script。模块化的代码要写：module（当前最常见做法）
·ecmaFeatures：一个配置对象，可配置项如下（value 均为 true/false）
- globalReturn：允许在全局作用域下使用 return 语句
- impliedStrict：启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
- jsx： 启用 JSX
- experimentalObjectRestSpread（尽量别用，含义就不给了。想知道为啥，查官网去吧~哈哈）
常规 react 项目配置：
module.exports = {
parserOptions: {
ecmaVersion: 6,
sourceType: 'module',
ecmaFeatures: {
jsx: true
}
},
plugins: ['react'],
env: {
es6: true
}
}
2、parser
指定要使用的解析器。（parser和parserOptions要同时使用）
可选项：
·esprima
·babel-eslint： 一个对Babel解析器的包装，使其能够与 ESLint 兼容。
·@typescript-eslint/parser：将 TypeScript 转换成与 estree 兼容的形式，以便在ESLint中使用。
【注】
eslint 默认解析器为 espree。
灵魂拷问：解析器，怎么选？？
经过多方调查，分析，思考，个人总结了这么个选择方法，供君参考：
【如果你想使用一些 先进的语法】👉babel-eslint（比如es6789...）
【如果你想使用typescript】👉@typescript-eslint/parser
这俩简单，顾名就思义了。问题是，esprima 这货，和 espree，到底用 sei？嗯？
总结下就是，ESLint 想支持 es6 和 jsx 语法了，但是之前用的默认解析器 esprima 磨磨唧唧的没发版，没法只支持。ESLint 等不及，烦了，决定自己开发个解析器，于是在 esprima v1.2.2 的基础上，自行开发了 espree 这个解析器。从此，espree 就变成了默认解析器。
这么看来。。esprima 这个解析器选项，就基本上是个装饰品了。。还不如直接用默认的🙄
【注意】
日常开发中，你应该还会见到这三种之外的解析器。主要用于检查非 js 语法。
比如：vue-eslint-parser、@typescript-eslint/parser 等。
官网没有对其他解析器进行说明，但是有提示，使用其他解析器的时候，注意确认它是不是和 ESLint 兼容。至于咋确认。。你指定一下这个解析器，看看 eslint 会不会对你想检查的代码正常报错，就行了。
3、processor
指定插件的处理器。（需要和 plugins 字段配合使用）
【注】
处理器的作用：
（1）从包含 js 代码的非 js 文件中，提取出 js 代码，并让 eslint 检查这些 js 代码的规范性。
（2）在预处理过程中，假如需要对 js 代码进行某些转换，可以用处理器。
看看怎么用：
{
"plugins": ["a-plugin"],
"processor": "a-plugin/a-processor"
}
启用插件 a-plugin 提供的处理器 a-processor。
为特定类型的文件指定处理器：
{
"plugins": ["a-plugin"],
"overrides":[
{
"files": ["*.md"],
"processor": "a-plugin/markdown"
}
]
}
对 *.md 文件使用处理器 a-plugin/markdown。
4、environments
指定代码运行环境。
可选项（可同时定义多个，值设置为 true 即可）：
配置示例：
module.exports = {
"env": {
"browser": true,
"node": true
}
}
5、globals
定义全局变量。告知 eslint，不必报 no-undef 错误。
配置示例：
{
"globals": {
"var1": "writable", // 全局变量 var1，可写
"var2": "readonly" // 全局变量 var2，仅可读
}
}
或 手动禁止某些全局变量：
{
"env": {
"es6": true
},
"globals": {
"Promise": "off"
}
}
6、plugins
使用第三方插件。（要先安装才能使用）
【个人理解】
第三方插件是用来做什么的？
【答】
插件的作用，通常都是用来增强一款框架能力的。在这里，也就是增强 eslint 的能力。
因此，可以理解为，plugins 就是在 eslint 常规检查 js 代码规范这个能力之外，给它增加一些新的能力。
比如，eslint-plugin-prettier 这个插件，就是用来把 prettier 的能力赋给 eslint。即：让 eslint 拥有和 prettier 一样的代码格式化能力。
使用时，可以省略 eslint-plugin 前缀。
如：
{
plugins: [
"plugin1", // 等同于 eslint-plugin-plugin1
"eslint-plugin-plugin2"
]
}
使用示例：
（1）安装
yarn add eslint-plugin-prettier -D
（2）使用
{
"plugins": ["prettier"]
}
prettier 格式化代码的能力，将被集成到 eslint 上。
7、rules
手动自定义代码规范。
0：不检查
1：报警告
2：报错
这个没什么可说的，自行配置咯~
具体可配置的规则见官网：https://eslint.bootcss.com/docs/rules/
8、extends
用于继承某些基础配置。值可以是字符串/数组。值为数组时，每个配置继承它前面的配置。
说白了，就是别人提前写好了一套 rules，你直接拿过来用就行。不用自己一个一个一个的，写 rules 规则。
配置示例：
{
extends: [ "eslint:recommended"]
}
要是有不符合自己心意的规则，就手写 rules，覆盖掉基础配置（eslint:recommended），就好啦。
9、其他不太常用的配置项
（1）设置某些文件，禁用部分检查
{
"rules": {...},
"overrides": [ {
"files": ["*-test.js","*.spec.js"],
"rules": { "no-unused-expressions": "off" }
} ]
}
files 匹配到的那些文件，均关闭 no-unused-expressions 检查。
（2）sharedData 共享数据
自己没用过。读了几遍官网，理解如下：
如果开发者自己自定义一些规则，可能有多个规则都需要同样的数据。这个时候，使用这个字段，类似定义一个全局的数据，每个规则都能拿到（包括非自定义的规则。只不过人家也不用咱的数据）。
看起来是，根本不使用 rules 字段提供的可配置项，而是自己自定义、自己写规则，这种意思。
这个规则，看起来应该也是个方法。因为说，在每个规则执行前，都会拿到 sharedData。
使用如下：
{
"settings": {
"sharedData": "Hello"
}
}
网友评论