配置项
一、parser 解析器
ESLint 默认使用Espreer作为其解析器，但是该解析器仅支持最新的ECMPScript(es5)标准，对于实验性的语法和非标准（例如 Flow或TypeScript类型）语法是不支持的。因此，开源社区提供了以下两种解析器来丰富相关的功能：
-
babel-eslint:Babel一个工具链，主要用于将ECMAScript 2015+(es6+)版本的代码转换为向后兼容的JavaScript语法，以便能够运行在当前和旧版本的浏览器或其他环境中。因此，如果在项目中使用es6，就需要将解析器改成babel-eslint。 -
@typescript-eslint/parser：该解析器将TypeScript转换成与estree兼容的形式， 允 许ESLint验证TypeScript源代码。
二、parserOptions 解析器
除了可以自定义解析器外，ESLint允许指定你想要支持的JavaScript语言选项。默认情况下，ESLint支持ECMPScript 5语法。你可以覆盖该设置，以启用对ECMPScript其它版本和JSX的支持。
三、env、global 环境和全局变量
ESLint 会检测未声明的变量，并发出警告，但是有些变量是我们引入的库声明的，这里就需要提前在配置中声明。每个变量有三个选项，writable，readonly和off，分别表示可重写，不可重写和禁用。
3.1 语法
{
"globals": {
// 声明 jQuery 对象为全局变量
"$": false, // true表示该变量为 writeable，而 false 表示 readonly
"jQuery": false
}
}
在globals中一个个的进行声明未免有点繁琐，这个时候就需要使用到env，这是对一个环境定义的一组全局变量的预设。当然，我们可以在golbals中使用字符串off禁用全局变量来覆盖env中的声明。
{
"env": {
"browser": true,
"es2021": true,
"jquery": true // 环境中开启jquery，表示声明了jquery相关的全局变量，无需在globals二次声明
}
}
如果是微信小程序开发，env并没有定义微信小程序变量，需要在globals中手动声明全局变量，否则在文件中引入变量，会提示报错。声明如下所示：
{
globals: {
wx: true,
App: true,
Page: true,
Component: true,
getApp: true,
getCurrentPages: true,
Behavior: true,
global: true,
__wxConfig: true,
},
}
四、rules 规则
ESLint 附带有大量的规则，你可以在配置文件的rules属性中配置你想要的规则。要改变一个规则设置，你必须将规则 ID 设置为下列值之一：
-
off或0: 关闭规则 -
warn或1: 开启规则，warn级别的错误 (不会导致程序退出) -
error或2: 开启规则，error级别的错误(当被触发的时候，程序会退出)
4.1 语法
rules: {'no-loop-func': 'off',
'no-param-reassign': 'off',
'no-nested-ternary': 'off',
no-underscore-dangle': 'off',
}
五、Plugins 插件
虽然官方提供了上百种的规则可供选择，但是这还不够，因为官方的规则只能检查标准的JavaScript语法，如果你写的是JSX或者TypeScript，ESLint 的规则就开始束手无策了。
这个时候就需要安装 ESLint 的插件，来定制一些特定的规则进行检查。ESLint 的插件与扩展一样有固定的命名格式，以 eslint-plugin- 开头，使用的时候也可以省略这个头。
举个例子，我们要在项目中使用TypeScript，前面提到过，需要将解析器改为@typescript-eslint/parser，同时需要安装@typescript-eslint/eslint-plugin插件来拓展规则，添加的plugins中的规则默认是不开启的，我们需要在rules中选择我们要使用的规则。也就是说 plugins是要和rules结合使用的。如下所示:
5.1 语法
// npm i --save-dev @typescript-eslint/eslint-plugin // 注册插件
{
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"], // 引入插件
"rules": {
"@typescript-eslint/rule-name": "error" // 使用插件规则
'@typescript-eslint/adjacent-overload-signatures': 'error',
'@typescript-eslint/ban-ts-comment': 'error',
'@typescript-eslint/ban-types': 'error',
'@typescript-eslint/explicit-module-boundary-types': 'warn',
'@typescript-eslint/no-array-constructor': 'error',
'no-empty-function': 'off',
'@typescript-eslint/no-empty-function': 'error',
'@typescript-eslint/no-empty-interface': 'error',
'@typescript-eslint/no-explicit-any': 'warn',
'@typescript-eslint/no-extra-non-null-assertion': 'error',
...
}
}
六、extends 扩展
extends可以理解为一份配置好的plugin和rules，extends属性值一般包括以下两种:
-
指定配置的字符串: 比如官方提供的两个拓展
eslint:recommended或eslint:all，可以启用当前安装的ESLint中所有的核心规则，省得我们在rules中一一配置。 -
字符串数组: 每个配置继承它前面的配置。如下所示，拓展是一个数组，
ESLint递归地扩展配置, 然后使用rules属性来拓展或者覆盖extends配置规则。
6.1 语法
{
"extends": [
"eslint:recommended", // 官方拓展
"plugin:@typescript-eslint/recommended", // 插件拓展
"standard", // npm包，开源社区流行的配置方案，比如：eslint-config-airbnb、eslint-config-standard
],
"rules": {
"indent": ["error", 4], // 拓展或覆盖extends配置的规则
"no-console": "off",
}
};