在前端开发中，代码的规范性至关重要。ESLint 是一个基于 JavaScript 代码的静态分析工具，它可以分析代码中的问题，并给出修复建议。ESLint 的使用可以帮助我们提高代码的质量和可读性。
在 ESLint 中，extends 是一个重要的配置项，它可以帮助我们选择和定制不同的代码规范。本文将详细介绍 ESLint 的 extends 配置，并提供一些例子和指导意义。
extends 配置的作用
在 ESLint 中，extends 配置用于继承一些标准的规则集或自定义规则集。
- 继承标准规则集：ESLint 内置了许多标准规则集，如
eslint:recommended、plugin:react/recommended等。通过继承标准规则集，我们可以使用一些预定义的规则进行代码检查。 - 继承自定义规则集：我们可以根据团队的开发需求，自己定义一些规则集，通过
extends配置进行使用。
extends 配置的优先级
在 extends 配置中，后面的规则集会覆盖前面的规则集，因此需要注意规则集的声明顺序。
比如，当我们同时继承了 eslint:recommended 和 plugin:react/recommended 时，如果两个规则集存在相同的规则，那么 plugin:react/recommended 的规则会覆盖 eslint:recommended 的规则。
extends 配置的语法
extends 配置可以是一个字符串，也可以是一个字符串数组。字符串可以是预定义规则集的名称，也可以是相对路径或绝对路径，指向一个 .eslintrc 配置文件。
以下是 extends 配置的例子：
-- -------------------- ---- ------- -- ----- -------------------- - -------------------------- - ---------- ---------------------- --------------------------- - -- --------- ----------- --- - ---------- ------------------------ -
在 ./path/to/my-config.js 文件中可以定义自定义的规则集，例如：
module.exports = {
rules: {
'no-alert': 'warn',
'no-console': 'warn',
'no-debugger': 'error'
}
}常用的预定义规则集
在 ESLint 中，有许多预定义的规则集，这里列出一些最常用的规则集。
eslint:recommended：ESLint 内置的推荐规则集。airbnb-base：Airbnb 公司的 JavaScript 代码规范。google：Google 公司的 JavaScript 代码规范。standard：JavaScript 标准风格。
自定义规则集
在开发中，我们也可以自定义规则集，以适应特定的开发需求。
以下是一个自定义规则集的例子，该规则集禁止使用 alert 和 console 函数：
module.exports = {
rules: {
'no-alert': 'error', // 禁止使用 alert 函数
'no-console': 'error' // 禁止使用 console 函数
}
}然后，我们可以在 .eslintrc.json 文件中使用该规则集：
{
"extends": "./path/to/my-config.js"
}总结
在本文中，我们介绍了 ESLint 的 extends 配置，了解了 extends 配置的作用、优先级和语法。我们还给出了一些常用的预定义规则集和自定义规则集的例子。
实际开发中需要根据团队的开发需求和项目的特点选择和定制不同的规则集，以保证代码的规范性，提高代码的质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ef2097f6b2d6eab39269fa