ESlint 配置从0到1 (一)

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