ESLint核心配置项:
1. parser - 解析器
ESLint底层默认使用ESpree来进行ast解析,espree是基于acorn实现的,虽然acorn解析的ast能解析绝大多数ECMAscript语法,
但是acorn不能解析ts代码,所以espree也不能解析,因此要引入其他解析器。
社区提供的解决方案是 @typescript-eslint/parser,
这个解析器能将ts代码转换为ESpree能识别的格式(即EStree格式),然后在ESLint下进行格式检查,以此兼容了typescript语法。
2. parserOptions - 解析器选项
- ecmaVersion: 这个配置和 Acron 的 ecmaVersion 是兼容的,可以配置 ES + 数字(如 ES6)或者ES + 年份(如 ES2015),也可以直接配置为latest,启用最新的 ES 语法。
- sourceType: 默认为script,如果使用 ES Module 则应设置为module
- ecmaFeatures: 为一个对象,表示想使用的额外语言特性,如开启 jsx。
3. rules - 具体代码规则
在rules对象里,key一般为规则名,value为具体的配置内容。
如果value配置为数组,第一个元素为规则的ID,
off - 0 关闭规则
warn - 1 开启规则,违背规则抛出warning,程序不会退出
error - 2 开启规则,违背后抛出error,程序退出
(具体的规则配置可能会一样,有的是一个字符串,有的可以配置一个对象,具体参考 cn.eslint.org/docs/rules/)
4. plugins
ESLint本身没有内置ts的代码规则,需要添加 @typescript-eslint/eslint-plugin 来扩展一些关于TS代码的规则。
// .eslintrc.js
module.exports = {
// 添加 TS 规则,可省略`eslint-plugin`
plugins: ['@typescript-eslint']
}
添加插件后只是扩展了ESLint本身的规则集,但ESLint默认并没有开启这些规则的校验。
要开启或者调整规则的校验,需要在rules里面配置。
// .eslintrc.js
module.exports = {
// 开启一些 TS 规则
rules: {
'@typescript-eslint/ban-ts-comment': 'error',
'@typescript-eslint/no-explicit-any': 'warn',
}
}
5. extends - 继承配置
继承另一份ESLint配置,可以是字符串可以是字符串数组
3种继承方式:1.从ESLint本身继承 2.从类似 eslint-config-xxx 的 npm 包继承 3.从 ESLint 插件继承。
// .eslintrc.js
module.exports = {
"extends": [
// 第1种情况
"eslint:recommended",
// 第2种情况,一般配置的时候可以省略 `eslint-config`
"standard"
// 第3种情况,可以省略包名中的 `eslint-plugin`
// 格式一般为: `plugin:${pluginName}/${configName}`
"plugin:react/recommended"
"plugin:@typescript-eslint/recommended",
]
}
有了 extends 的配置,对于之前所说的 ESLint 插件中的繁多配置,我们就不需要手动在rules里一一开启了,
通过 extends 字段即可自动开启继承插件中的规则。
extends: ["plugin:@typescript-eslint/recommended"]
6. env 和 globals
env 是可以配置根据环境不同来判断是否开启
// .eslint.js
module.export = {
"env": {
"browser": "true",
"node": "true"
}
}
globals是可以配置某个全局变量是否可以被修改
配置值可以3种:
"writable"或者 true,表示变量可重写;
"readonly"或者false,表示变量不可重写;
"off",表示禁用该全局变量。
jQuery为例 ,
// .eslintrc.js
module.exports = {
"globals": {
// 不可重写
"$": false,
"jQuery": false
}
}