ESLint 是一个广泛使用的 JavaScript 代码检查工具，用来发现代码中的问题并提供自动化修复。它使用了一系列解释器（parser）、插件（plugins）和规则（rules），这些组成部分有助于 ESLint 的强大功能。
本文将对 ESLint 的解释器、插件和规则进行较为详细的解释，让读者对其有深入的了解，并懂得如何结合这些组成部分去优化自己的代码。
解释器（parser）
解释器指的是用来解析源代码的程序，JavaScript 有多种解释器，不同的解释器可能针对不同的 JavaScript 版本进行开发，并支持该版本的语法。ESLint 中也拥有多个解释器，下面是一些常见的解释器：
- Espree：默认的解释器，支持 ECMAScript 5 和部分 ECMAScript 6。
- Babel-ESLint：支持 ECMAScript 6 和部分 ECMAScript 7，可以转换 ES6 的代码到 ES5 代码。
- @typescript-eslint/parser：支持 TypeScript。
对于每个使用到的解释器，都需要将其在配置文件中进行指定。例如，在使用 Babel-ESLint 解释器时，可以在 .eslintrc.json 中进行如下配置：
{
"parser": "babel-eslint"
}插件（plugins）
插件是一些额外的规则集，用于对特定的代码问题进行检查。ESLint 中开发了大量的插件，包括了从代码格式检查至最佳实践等多个方面。下面是一些插件的示例：
- eslint-plugin-react：检查 React 代码。
- eslint-plugin-vue：检查 Vue.js 代码。
- eslint-plugin-import：检查是否按照一致的规则编写了导入语句。
使用插件需要首先安装它们。例如，要使用 ESLint 插件 eslint-plugin-vue，可以在命令行中运行如下命令：
npm install --save-dev eslint-plugin-vue
然后在 .eslintrc.json 中进行如下配置：
{
"extends": [
"plugin:vue/base"
]
}这里的 plugin:vue/base 表示继承该插件的基础规则。如果希望启用更多的规则，可以使用 plugin:vue/recommended。
还可以额外配置一些插件规则。例如，要禁用 vue/no-parsing-error 规则，可以在 .eslintrc.json 中进行如下配置：
{
"rules": {
"vue/no-parsing-error": "off"
}
}规则（rules）
规则是用来指定代码中不允许出现的问题类型，并可以进行自动修复。例如，禁止使用 var 关键字可以指定 no-var 规则：
{
"rules": {
"no-var": "error"
}
}从本质上，规则也是插件的一部分，而插件则多个规则的集合。使用插件是为了避免在配置文件中大量编写规则。
有一些内置的规则，也可以使用已安装的插件。例如，在使用 eslint-plugin-react 时，可以使用 react/prefer-stateless-function 规则来帮助编写更清晰的代码：
{
"rules": {
"react/prefer-stateless-function": "error"
}
}在指定规则时，可以使用以下不同的值：
- "off" 或者 0 表示禁用该规则。
- "warn" 或者 1 表示该规则出现问题将给出警告。
- "error" 或者 2 表示该规则出现问题将会导致 ESLint 报错。
总结
ESLint 是一个非常便捷并广泛使用的 JavaScript 代码检查工具，在开发过程中使用它可以更快地检查出代码问题，且使用起来也不难。本文对 ESLint 的解释器、插件和规则进行了详细的解释，读者可以按需了解，并结合示例代码来更快地掌握 ESLint 的强大功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c72c6d10032fedd390b002