本文主要介绍 ESLint 的高级用法：插件、扩展和规则，这些功能能够帮助我们更好地检测代码质量、规范化代码风格，提高我们代码的可读性、可维护性，让我们在编码的过程中更加高效。
插件
ESLint 支持插件，可以通过安装插件来增强其功能。插件的安装方式与规则相同，在 .eslintrc 文件中配置。
例如，我们想要检测 JS 中是否有未使用的变量，需要安装插件 eslint-plugin-unused-vars，安装命令如下：
npm install eslint-plugin-unused-vars --save-dev
然后在 .eslintrc 文件中增加插件的配置：
{ "plugins": ["unused-vars"] }
这样我们就可以在代码编辑器中看到未使用的变量：
const a = 1; const b = 2; console.log(a);
代码编辑器会提示 b 未使用。
扩展
有时我们想要继承已有的规则进行扩展，使得配置更加简便。ESLint 支持通过扩展来实现这种功能，扩展是一组预设规则的集合，可以一次性加载多个规则。
例如，我们想要使用官方的 eslint:recommended 规则，并添加 vue 插件的规则，可以这样配置：
{ "extends": ["eslint:recommended", "plugin:vue/recommended"] }
其中，eslint:recommended 是官方的推荐规则集，plugin:vue/recommended 是 vue 插件的推荐规则集。
规则
ESLint 的规则是对代码中违反的语法做出的告警或报错。ESLint 的默认规则使用了 JavaScript Standard Style，但是使用者可以自定义规则，在 .eslintrc 文件中进行配置。
- 配置方式
ESLint 的规则有三种等级：off、warn 和 error。其中，off 表示关闭规则，warn 表示提出警告，error 表示提出错误。可以在 .eslintrc 文件中配置每个规则的等级，下面以 no-unused-vars 规则为例：
{ "rules": { "no-unused-vars": "error" } }
此时，no-unused-vars 规则会被设置成 error 级别，即如果检测到未使用的变量，会认为是一个错误。
- 自定义规则
除了使用 ESLint 的内置规则以外，我们还可以自定义规则。
假设我们想要写一个规则，对于使用了自定义的全局变量，报警提示，我们可以使用 no-undef 规则，在规则上做一些扩展。
这里我们定义了一个全局变量 foo，ESLint 会检测到该变量并输出警告。
/* eslint no-unused-vars: "off" */ /* eslint no-undef: "error" */ const foo = 'foo'; console.log(bar);
在 .eslintrc 文件中配置扩展的规则，即自定义的全局变量：
{ "globals": { "foo": "readonly" } }
这样，ESLint 就会输出 bar is not defined 的警告信息。
示例代码
以下是示例代码，包括插件、扩展和自定义规则的配置：
-- -------------------- ---- ------- - ---------- - --------------------- ------------------------ -- ---------- - ------------- -- ---------- - ------ ---------- -- -------- - ----------------- -- ------------- -------- ----------------------------- -------- ----------- -------- ------- ------- - -展开代码
以上就是 ESLint 的高级用法——插件、扩展和规则。希望可以帮助您更好地使用 ESLint，提高代码质量和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c031d8314edc268466910f
