配置文件 eslintrc.js 详解
如果项目目录下有多个配置文件，ESLint 只会使用一个，优先级为：.eslintrc.js > .eslintrc > package.json，一般我们都是在 .eslintrc.js 配置。
同时，如果配置文件里没有"root": true这个属性，ESLint就会继续向外寻找配置文件，直到找到有"root": true的为止，所有这些配置文件的规则都会被层叠应用。若有重复的属性配置，则离文件更近的配置文件具有更高的优先级。
当想要所有项目都遵循一个特定的约定时会很有用，但还是建议给项目根目录的.eslintrc.js加上root: true
1. 配置文件相关属性 Configuration Files
1.1 extends - Extending Configuration Files
一个ESLint配置文件，一旦扩展了(即从外部引入了其他配置包)，就能继承另一个配置文件的所有属性(包括rules, plugins, and language option在内)，然后通过merge合并/覆盖所有原本的配置。
extends属性的值可以是：
- 定义一个配置的字符串(配置文件的路径、可共享配置的名称，如eslint:recommended 或 eslint:all)
- 字符串数组，每个扩展都会先继承前面一个扩展的配置
"eslint:recommended" 这个扩展包帮我们启用了一系列核心规则，这些规则是在 rules页面 中被标记为 ✅ 的常见问题。
1.1.1 用插件来扩展ESLint配置
ESLint插件是可以给ESLint添加很多扩展规则的npm包，它可以执行很多方法，包括但不限于添加新规则和导出可共享配置。
在添加到配置文件 (如.eslintrc.js) 的 plugins 的 时候，可以省略插件包名的eslint-plugin-前缀
在extends中插件字符串值则可以是：
-
plugin: - 插件包名(同样省略
eslint-plugin-前缀，如果有的话。详见下面注解①) /- 插件导出的模块中
configs对象内定义好的配置名称，如 下例中的recommended。详见：configs-in-plugins
{
"plugins": [
"react"
],
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
}
插件包名的格式一般是eslint-plugin-<plugin-name>，就像 eslint-plugin-prettier；
也可能是含命名空间包的格式@<scope>/eslint-plugin-<plugin-name>，例如 @vue/eslint-config-prettier；
甚至 @<scope>/eslint-plugin，如@jquery/eslint-plugin。
1.1.2 插件具体是如何实现扩展配置的
通过extends设置的配置包加载的时候，是递归的形式去查找配置文件(最终是一个导出的对象，详细看②)，然后一步步派生继承的。
例如： extends: ["foo"]，然后对应的eslint-config-foo有plugins: ["bar"], ESLint 会先找到 ./node_modules/ 下的eslint-plugin-bar, (而不是 ./node_modules/eslint-config-foo/node_modules/)，更不会从祖先目录去查找。配置文件和基本配置中的每个插件都会唯一地解析。
按照上述规则，我们来梳理下["plugin:vue/essential", "eslint:recommended", "@vue/prettier"](vue-cli4 + ESLint + prettier 的 默认extends值)的配置文件分别在哪里。仅帮助加深理解。
-
"plugin:vue/essential"：有 plugin: 前缀，显然要先去找./node_modules/eslint-plugin-vue，然后看它导出的配置里的essential属性。在./node_modules/eslint-plugin-vue/lib/index.js 里找到了。module.exports = { rules: {}, // 省略 configs: { 'base': require('./configs/base'), 'essential': require('./configs/essential'), // "plugin:vue/essential" 的配置就在这里 // 其余省略... }, processors: { '.vue': require('./processor') } } -
"eslint:recommended"： 没有eslint-config-eslint插件，说明是插件名/路径，就直接到eslint的npm包下去找了(本来就是eslint自身😂)。而且它封装得比较复杂，没找到在哪里导出配置和configs 关键字，只是能确认"eslint:recommended" 的配置规则在./node_modules/eslint/conf/eslint-recommended.js -
"@vue/prettier"：同上直接到@vue包里找，先匹配eslint-config-变量名的原则，找到了eslint-config-prettier；再到里面找到了导出模块
module.exports = {
plugins: ['prettier'], // eslint-plugin-prettier 插件
extends: [
require.resolve('eslint-config-prettier'), // eslint-config-prettier 配置插件
require.resolve('eslint-config-prettier/vue')
],
rules: {
'prettier/prettier': 'warn' // 这里修改了 eslint-plugin-prettier 的配置
// 如果怕麻烦，亲测默认配置和 eslint 会有冲突(抱warning)，可以直接在这里修改
}
}
我们再去项目根目录的./node_modules找 eslint-plugin-prettier 和 eslint-config-prettier 插件，然后得知，@vue/prettier最终导入了./node_modules/eslint-config-prettier/index.js、./node_modules/eslint-config-prettier/vue.js和./node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js的规则
2. 语言相关属性 Language Options
parserOptions - Specifying Parser Options
指定你想要支持的 JavaScript 语言选项。默认支持 ECMAScript 5 语法。你可以覆盖该设置，以启用对 ECMAScript 其它版本和 JSX 的支持。
// eslintrc.js
{
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"semi": "error"
}
}
3. 规则属性 Rules
3.1 rules - Configuring Rules
ESLint 拥有大量的规则。你可以通过配置插件添加更多规则。使用注释或配置文件修改你项目中要使用的规则。要改变一个规则，你必须将规则 ID 设置为下列值之一：
-
"off"或0- 关闭规则 -
"warn"或1- 开启规则，使用警告级别的错误：warn(不会导致程序退出) -
"error"或2- 开启规则，使用错误级别的错误：error(当被触发的时候，程序会退出)
3.1.1 在文件注释里配置规则(只在当前文件生效)
/* eslint eqeqeq: 0, curly: "error" */
上面的例子，eqeqeq 规则被关闭，curly 规则被打开，且定义为错误级别。出于便于理解的考虑，可以用字符串值，如果很熟悉的话用对应的数字来定义也是一样的。
如果一个规则有额外的参数选项，你可以用数组字面量语法来指定它们，比如：
/* eslint quotes: ["error", "double"], curly: 2 */
这条注释为规则quotes指定了 “double”选项。数组的第一项总是规则的严重程度（数字/字符串）
3.1.2 在配置文件配置规则
要配置定义在插件中的一个规则，你必须使用 插件名/规则ID 的形式。比如：
{
"plugins": [
"plugin1",
"react" // 配置 eslint-plugin-react 插件
],
"rules": {
"eqeqeq": "off",
"curly": "error",
"quotes": ["error", "double"],
"plugin1/rule1": "error",
"react/jsx-boolean-value": 2 // 配置eslint-plugin-react 的 jsx-boolean-value 规则
}
}
规则 plugin1/rule1 表示来自插件 plugin1 的 rule1 规则。当指定来自插件的规则时，确保删除 eslint-plugin- 前缀。ESLint 在内部只使用没有前缀的名称去定位规则。
4. 插件相关属性 Plugins
4.1 parser - Specifying Parser
被指定的解析器必须是可以从它的配置文件中加载的Node模块。这意味着应该使用 npm 单独安装这个解析器包；它必须符合 parser interface。
{
"parser": "babel-eslint",
"rules": {
"semi": "error"
}
}
4.2 plugins - Configuring Plugins
ESLint支持使用第三方插件。要使用插件，必须先用npm进行安装。
要在配置文件中配置插件，可以用 plugins 属性，它的值是包含插件名称的列表(数组)。其中，插件名可以省略eslint-plugin-前缀(如果有的话)。
插件是根据配置文件(如eslintrc.js)解析的。换句话说，ESLint会像通过运行 require('eslint-plugin-pluginname')一样加载我们配置在eslintrc.js中的插件。所以要保证在这个包在当前配置文件的./node_modules/下找得到。
连着extends属性讲比较清楚，因此其他已经在上面 1.1.2 - 插件具体是如何实现扩展配置的 讲过了。
常用规则和参数说明
避免文章冗长又碍可读性又分篇了，指路：➡️ ESLint配置详解(二) - 常用规则(Rules)集合
