ESLint配置详解(一) - 超级深入详细

Posted 2023-02-19

参考技术A

如果项目目录下有多个配置文件，ESLint 只会使用一个，优先级为： .eslintrc.js > .eslintrc > package.json ，一般我们都是在 .eslintrc.js 配置。
同时，如果配置文件里没有 "root": true 这个属性，ESLint就会继续向外寻找配置文件，直到找到有 "root": true 的为止，所有这些配置文件的规则都会被层叠应用。若有重复的属性配置，则离文件更近的配置文件具有更高的优先级。
当想要所有项目都遵循一个特定的约定时会很有用，但还是建议给项目根目录的 .eslintrc.js 加上 root: true

1.1 extends - Extending Configuration Files
一个ESLint配置文件，一旦扩展了(即从外部引入了其他配置包)，就能继承另一个配置文件的所有属性(包括rules, plugins, and language option在内)，然后通过merge合并/覆盖所有原本的配置。

extends 属性的值可以是：

"eslint:recommended" 这个扩展包帮我们启用了一系列核心规则，这些规则是在 rules页面 中被标记为 ✅ 的常见问题。

ESLint插件 是可以给ESLint添加很多扩展规则的npm包，它可以执行很多方法，包括但不限于 添加新规则 和 导出 可共享配置 。
在添加到配置文件 (如 .eslintrc.js ) 的 plugins 的 时候，可以省略插件包名的 eslint-plugin- 前缀

在 extends 中插件字符串值则可以是：

插件包名的格式一般是 eslint-plugin-<plugin-name> ，就像 eslint-plugin-prettier ；
也可能是含命名空间包的格式 @<scope>/eslint-plugin-<plugin-name> ，例如 @vue/eslint-config-prettier；
甚至 @<scope>/eslint-plugin ，如 @jquery/eslint-plugin 。

通过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值)的配置文件分别在哪里。仅帮助加深理解。

我们再去项目根目录的 ./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 的规则

parserOptions - Specifying Parser Options
指定你想要支持的 javascript 语言选项。默认支持 ECMAScript 5 语法。你可以覆盖该设置，以启用对 ECMAScript 其它版本和 JSX 的支持。

3.1 rules - Configuring Rules
ESLint 拥有大量的规则。你可以通过配置插件添加更多规则。使用注释或配置文件修改你项目中要使用的规则。要改变一个规则，你必须将规则 ID 设置为下列值之一：

3.1.1 在文件注释里配置规则 (只在当前文件生效)

上面的例子， eqeqeq 规则被关闭， curly 规则被打开，且定义为错误级别。出于便于理解的考虑，可以用字符串值，如果很熟悉的话用对应的数字来定义也是一样的。

如果一个规则有额外的参数选项，你可以用数组字面量语法来指定它们，比如：

这条注释为规则 quotes 指定了 “double”选项。数组的第一项总是规则的严重程度（数字/字符串）

3.1.2 在配置文件配置规则

要配置定义在插件中的一个规则，你必须使用 插件名/规则ID 的形式。比如：

规则 plugin1/rule1 表示来自插件 plugin1 的 rule1 规则。当指定来自插件的规则时，确保删除 eslint-plugin- 前缀。ESLint 在内部只使用没有前缀的名称去定位规则。

4.1 parser - Specifying Parser
被指定的解析器必须是可以从它的配置文件中加载的Node模块。这意味着应该使用 npm 单独安装这个解析器包；它必须符合 parser interface 。

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)集合