ESlint 配置从0到1 (一)-CSDN博客

配置 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。