深入解析 ESLint 的 extends 规则

149 阅读3分钟

《深入解析 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");
}

贴个图:

image.png

(二)继承 plugin 中的配置

语法规则为:plugin:[plugin-name]/[config-name]

举个例子,假如安装了 eslint-plugin-prettier

{
 ...
  "extends": ["plugin:eslint-plugin-prettier/recommended"]
}

规则可以拆分为三部分来解析:

  1. plugin: 为前缀,想要继承 plugin 的规则,必须加 plugin: 前缀。

  2. 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
  3. config-name 为配置名称,plugin 中的 configs 包含了所有配置。比如下面的图片示例:

image.png

(三)继承配置文件

语法规则为:[name]/[module-name]

举个例子:

{
 ...
  "extends": ["eslint-config-prettier/standard"]
}

eslint 支持以 eslint-config 开头的 npm 模块,如 eslint-config-prettier,此包内包含了许多配置,如最经典的 standard。如下图所示:

image.png

写法同样支持缩写,比如 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 的原因

image.png

(二)eslint-plugin-prettier 需要搭配 eslint-config-prettier 的原因

image.png

通过对 ESLint 的 extends 规则的深入了解,我们可以更加灵活地配置 ESLint,使其更好地适应我们的项目需求,提高代码质量和开发效率。(以上如有错误麻烦指正,感谢)