深入解析 ESLint 的 extends 规则《深入解析 ESLint 的 extends 规则》在 JavaScr

《深入解析 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，使其更好地适应我们的项目需求，提高代码质量和开发效率。（以上如有错误麻烦指正，感谢）

深入解析 ESLint 的 extends 规则