配置 ESlint 的两种方式
- 配置注释:通过在 js 文件中嵌入注释的形式进行 ESlint 的配置;
- 配置文件:在当前工作目录下使用一个 JS,JSON 或是 YAML文件来指定配置信息。这个文件可以命名为 .eslintrc.* ,或者是在 package.json 中 eslintConfig 属性中配置。另外还可以通过命令行指定配置。
配置 parser options
ESlint 默认解析 ES5 语法,通过配置 parser options,可以覆盖这个设置从而解析其他 ES 版本 或者是 JSX 语法(注:支持 JSX 语法和支持 React 语法是两个概念,使用 React 开发时推荐使用 eslint-plugin-react)。同样,支持 ES6 语法和支持 ES6 中新增的数据类型比如 Set 等也略有不同,仅支持ES6语法可直接配置 {"parserOptions": {"ecmaVersion": 6}} ,若需支持新增的数据类型则配置为 {"env": {"es6": true}}(自动支持ES6语法)。
parserOptions 可选的配置项有:
-
ecmaVersion : 可配置为 3,5(默认),6(2015),7(2017),8(2018),9(2019),10(2019)
-
sourceType : 可配置为 script 或 module
-
ecmaFeatures : 用来配置一些语言其他特性的对象
- globalReturn : 是否允许 return 出现在全局作用域中
- impliedStrict : 是否在全局打开严格模式
- jsx : 是否允许 JSX 语法
配置 parser(解析器)
ESlint 默认使用Espree作为解析器,也可以指定满足以下条件的其他解析器:
- 必须是一个被下载到本地的 npm 模块
- 必须有 Esprima 兼容的接口
- 必须产生 Esprima 兼容的 tokens 和 AST
常用的可选项有:Esprima,Babel-ESlint,@typescript-eslint/parser
配置开发环境
env 决定了当前环境下可使用的全局变量,它的可选项有:
- browser -浏览器全局对象
- node -Node.js 全局变量以及scoping
- commonjs -CommonJS 全局变量以及scoping
- shared-node-browser -Node.js 和浏览器公共的全局变量
- es6 -允许使用ES6中处理modules之外所有的新特性
- worker -web workers 的全局变量
- amd -引入 amd 规范中的 define 和 require
- mocha -引入Mocha中所有的全局变量
- jasmine -Jasmine v1.3 和 v2.0 中所有的全局变量
- jest -Jest 全局变量
- phantomjs -PhantomJS 全局变量 ...(还有很多,具体可查看官方文档)
这些环境并不是互斥的,你可以一次定义多个,比如:
{
"env": {
"browser": true,
"node": true
}
}
复制代码
如果要使用一个插件中的环境,那要保证先将插件名定义的 plugins 数组中,比如:
{
"plugins": ["example"]
"env": {
"browser": true,
"node": true,
"example/custom": true
}
}
复制代码
配置全局变量
如果在一个JS文件中使用到了这个文件内没有定义的全局变量,ESlint 会进行报错。要去掉这个报错,可以选择在文件内部的注释配置全局变量或是通过配置文件修改。
- 通过注释配置:
/* global var1, var2 */
// 若要在当前文件修改var1值
/* global var1:writable, var2 */
复制代码
- 通过配置文件:
{
"globals": {
"var1": "writable",
"var2": "readonly"
}
}
// 也可以通过配置off去掉全部变量中某个变量的使用,比如在 es6 环境下去掉 Promise 的使用
{
"globals": {
"Promise": "off"
}
}
复制代码
配置规则
ESlint 提供了大量的规则,我们同样可以通过使用注释配置或配置文件来修改它们。要修改一个规则,就必须将将它的ID改为以下可选值:
- "off" 或 0 - 关闭这个规则检查
- "warn" 或 1 - 开启这个规则检查并提示(不影响退出状态)
- "error" 或 2 - 开启规则检查并报错
通过配置文件修改:
// 此处注意 quotes 规则加入了附加选项,故用数组表示
/* eslint quotes: ["error", "double"], curly: 2 */
// 使用 eslint 插件中定义的规则
/* eslint "plugin1/rule1": "error" */
复制代码
通过配置文件修改;
{
"rules": {
"eqeqeq": "off",
"curly": "error",
"quotes": ["error", "double"]
}
}
// 使用插件中的规则
{
"plugins": [
"plugin1"
],
"rules": {
"eqeqeq": "off",
"curly": "error",
"quotes": ["error", "double"],
"plugin1/rule1": "error"
}
}
复制代码
通过行内注释屏蔽规则
如果要在代码中暂时屏蔽掉某个规则,可以在代码中添加如下注释:
// 屏蔽所有规则
/* eslint-disable */
alert('foo');
/* eslint-disable */
// 屏蔽特定规则
/* eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');
/* eslint-disable no-alert, no-console */
// 只针对某一行做屏蔽(块级注释和行内注释均可)
alert('foo'); // eslint-disable-line
/* eslint-disable-next-line */
alert('foo');
foo() // eslint-disable-line example/rule-name
复制代码
对一组文件屏蔽规则
通过配置 overrides 属性可以对一组文件屏蔽某些规则:
{
"rules": {...},
"overrides": [
{
"files": ["*-test.js","*.spec.js"],
"rules": {
"no-unused-expressions": "off"
}
}
]
}
复制代码
本系列文章主要是将ESlint的配置文档翻译组织了一遍,以供自己查阅,源文档 Configuring ESlint。