在 ESLint 中使用 extends 来继承配置文件

ESLint 是一个广泛使用的 JavaScript 代码规范检查工具，它可以静态分析代码并检查出潜在的问题。在 ESLint 中，我们可以使用 extends 关键字来继承一个基础的配置文件，从而减少我们的配置工作量，提高效率。

基础配置文件

在 ESLint 的配置文件中，我们可以使用一个 JavaScript 对象来描述我们的配置。这个对象中包含了一系列的规则，每个规则有一个名称和一个配置，表示它要检查的内容以及检查的方式。

如果我们在一个项目中使用 ESLint，那么我们通常会在项目根目录下创建一个 .eslintrc.js 文件来存放我们的配置。这个文件可以像下面这样定义：

// www.javascriptcn.com code example
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: 'eslint:recommended',
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  rules: {
    'no-console': 'off',
    'no-unused-vars': ['error', { vars: 'all', args: 'after-used' }],
  },
};

该配置文件中使用了一个默认配置文件 eslint:recommended，这个配置文件中已经包含了一系列通用的规则，根据它我们可以进行基础的代码检查。

如果我们想要对某些规则进行定制，可以在 rules 中对它们进行覆盖或扩展。比如上面的例子中，我们关闭了 no-console 规则，表示允许使用 console 来输出调试信息。

在这个配置文件中，我们可以看到典型的 ESLint 配置文件格式：env、parserOptions、extends 和 rules。其中 env 和 parserOptions 用来指定我们的代码运行环境和解析选项，而 extends 和 rules 则用来继承和定义规则。

extends 配置选项

如果我们有多个项目或者同一个项目的不同代码库需要不同的 ESLint 规则集，我们不希望每个项目都手动创建一个 .eslintrc.js 文件来复制粘贴配置。这时，我们可以使用 extends 配置项，将一个已存在的 ESLint 配置文件作为基础配置文件进行继承。

在 extends 属性中可以指定一个字符串，这个字符串可以代表一个标准配置规则集（如 eslint:recommended）或者一个相对路径指向另一个配置文件。比如：

module.exports = {
  extends: ['eslint:recommended', './rules/es6.js'],
};

这个配置文件继承了 eslint:recommended 规则集和 ./rules/es6.js 配置文件。只需要编写 ./rules/es6.js 的自定义规则，即可与默认规则集进行合并。在这个自定义文件中，我们可以选择覆盖或扩展默认规则，或者声明全新规则。比如：

module.exports = {
  rules: {
    // 自定义规则
    'no-loop-func': 'error',
    'no-new': 'warn',
  },
};

这个自定义文件中禁止使用循环中定义函数，同时要求使用 new 关键字时用 warn 警告。

指导意义

使用 extends 继承 ESLint 配置文件，可以大大减少我们编写配置文件的工作量，将重点放在定制化规则上。

此外，拥有一个好的 ESLint 配置对于我们的代码质量和可维护性有着非常大的帮助。根据标准规则集和自定义规则，我们可以精确地指定代码应该遵循的规范，并发现和纠正一些潜在的问题。

在开发中，我们可以集成 ESLint 到编辑器或者前端构建流程中，让代码规范检查自动化。同时，我们也可以将 ESLint 配置文件与团队共享，使得所有成员都能遵循同一代码规范。

示例代码

// www.javascriptcn.com code example
module.exports = {
  env: {
    browser: true,
  },
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2021,
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {},
};

该配置文件展示了如何使用 extends 继承一个 React 配置规则集，并且使用了一些配置，比如启用 JSX 语法分析、禁止没用的 React 组件引用等。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67cee9a8e46428fe9e9a5eb8