《深入解析 ESLint 的 extends 规则》
在 JavaScript 开发中,ESLint 是一个强大的代码检查工具,它可以帮助我们确保代码的质量和一致性。而其中的 extends
规则更是在配置 ESLint 时起到了关键作用。今天,就让我们深入探讨一下 ESLint 的 extends
规则,了解它的语法和各种使用场景。
一、extends
规则的基本语法
extends
的语法如下:
extends: ConfigPath | ConfigPath[]
举个例子:
{
...
"extends": ["eslint:recommended"]
}
那么,这个extends填写的配置,到底是如何寻找对应的配置规则呢?让我们接下来继续
二、extends
寻找配置文件的规则
(一)继承 ESLint 内部的配置
eslint
对 eslint:recommended
和 eslint:all
做了特殊处理,eslint
内部会单独判断这些值。比如在 v5 版本中(其他版本大致类似):
if (name === "eslint:recommended") {
return path.resolve(__dirname, "../../conf/eslint-recommended.js");
} else if (name === "eslint:all") {
return path.resolve(__dirname, "../../conf/eslint-all.js");
}
贴个图:
(二)继承 plugin 中的配置
语法规则为:plugin:[plugin-name]/[config-name]
。
举个例子,假如安装了 eslint-plugin-prettier
:
{
...
"extends": ["plugin:eslint-plugin-prettier/recommended"]
}
规则可以拆分为三部分来解析:
-
plugin:
为前缀,想要继承plugin
的规则,必须加plugin:
前缀。 -
plugin-name
为插件名称,这里又分两种情况:- 以
eslint-plugin
开头,比如eslint-plugin-prettier
,这种支持省略eslint-plugin
前缀,可以写成prettier
。如果插件名称不是以eslint-plugin
开头,则需要写全。 - 插件名称包含 scope(作用域),比如
@scope/eslint-plugin-react
,需要写成@scope/eslint-plugin-react/recommended
形式,同理支持省略eslint-plugin
前缀,写成@scope/react/recommended
- 以
-
config-name
为配置名称,plugin
中的configs
包含了所有配置。比如下面的图片示例:
(三)继承配置文件
语法规则为:[name]/[module-name]
。
举个例子:
{
...
"extends": ["eslint-config-prettier/standard"]
}
eslint
支持以 eslint-config
开头的 npm
模块,如 eslint-config-prettier
,此包内包含了许多配置,如最经典的 standard
。如下图所示:
写法同样支持缩写,比如 eslint-config-prettier/standard
可省略 eslint-config
前缀,写成 prettier/standard
。假如只写成 prettier
,那就是寻找的对应模块的 index.js
了。
三、标准的 ESLint 配置规则及示例
前置按需安装以下模块:
npm i eslint # 必须安装
npm i prettier eslint-config-prettier eslint-plugin-prettier # prettier 相关
npm i eslint-plugin-vue # vue 相关
eslint-config-prettier
:关闭 eslint 和 prettier 冲突的规则。eslint-plugin-prettier
:将 prettier 的规则设置到 eslint 中。
以下是一个标准的 ESLint 配置文件(以 v7 版本为例):
module.exports = {
// 指定代码运行的环境
"env": {
"browser": true, // 允许使用浏览器环境中的全局变量,如 window 和 document
"es2021": true, // 支持 ECMAScript 2021 的语法
// "node": true // 支持 node 环境变量,如 process 等
},
// 全局变量支持
"globals": {
// $: true // 假如 cdn 引入了 jquery
},
// 继承一些推荐的配置和规则集
"extends": [
"eslint:recommended", // 继承前面讲的 eslint 内部的配置
// "plugin:vue/recommended", // 继承 eslint-plugin-vue 的 essential 配置
// "plugin:prettier/recommended", // 继承 eslint-plugin-prettier 的配置(需搭配 eslint-config-prettier)
],
// 解析器选项,定义如何解析不同的 ECMAScript 版本和模块
"parserOptions": {
"ecmaVersion": 12, // 指定 ECMAScript 版本为 12(ES2021)
"sourceType": "module" // 指定使用 es module
},
// 插件部分,增加某些特定语言的支持,不如 vue、typescript
"plugins": [
// 支持 Vue.js 代码的解析和校验,此处可用主动填写,
// 因为 plugin:vue/recommended 中的 extends 最终会继承 base,其中就有 plugins 配置已经填写了
// "vue",
// "prettier", // 同理,也不用主动填写,因为 plugin:prettier/recommended 已经配置了
],
// 自定义规则
"rules": {
}
};
四、补充说明
(一)plugins
可不用主动填写 vue
的原因
(二)eslint-plugin-prettier
需要搭配 eslint-config-prettier
的原因
通过对 ESLint 的 extends
规则的深入了解,我们可以更加灵活地配置 ESLint,使其更好地适应我们的项目需求,提高代码质量和开发效率。(以上如有错误麻烦指正,感谢)