ESLint配置

ESlint 被设计为完全可配置的,这意味着你可以关闭每一个规则而只运行基本语法验证,或混合和匹配 ESLint 默认绑定的规则和你的自定义规则,以让 ESLint 更适合你的项目。有两种主要的方式来配置

  1. Configuration Comments - 使用 JavaScript 注释把配置信息直接嵌入到一个代码源文件中。
/*eslint for-direction: "error"*/
for (var i = 0; i < 10; i--) {
}
  1. Configuration Files - 使用 JavaScript、JSON 或者 YAML 文件为整个目录(处理你的主目录)和它的子目录指定配置信息。可以配置一个独立的 .eslintrc.* [.eslintrc.js or .eslintrc.json or .eslintrc.yml or .eslintrc.yaml ]文件,或者直接在 package.json 文件里的 eslintConfig 字段指定配置,ESLint 会查找和自动读取它们,再者,你可以在命令行运行时指定一个任意的配置文件。

如果你在你的主目录(通常 ~/)有一个配置文件,ESLint 只有在无法找到其他配置文件时才使用它。
有很多信息可以配置:

Environments - 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。
Globals - 脚本在执行期间访问的额外的全局变量。
Rules- 启用的规则及其各自的错误级别。
所有这些选项让你可以细粒度地控制 ESLint 如何对待你的代码

Specifying Parser Options 指定解析参数
ESLint默认支持ECMAScript 5, 可以自定义参数覆盖该设置,以启用对 ECMAScript 其它版本和 JSX 的支持。

注意

对 JSX 语法的支持不用于对 React 的支持。React 使用了一些特定的 ESLint 无法识别的 JSX 语法。如果你正在使用 React 并且想要 React 语义支持,我们推荐你使用 eslint-plugin-react。

使用{ "parserOptions": { "ecmaVersion": 6 } }来启用 ES6 语法支持;
要额外支持新的 ES6 全局变量,使用 { "env":{ "es6": true } }(这个设置会同时自动启用 ES6 语法支持)

使用 parserOptions 属性来设置解析器,可用的选项有:

  • ecmaVersion - 设置为3,5(默认), 你可以使用 6、7、8 或 9 来指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本号指定为 2015(同 6),2016(同 7),或 2017(同 8)或 2018(同 9)
  • sourceType - 设置为 "script" (默认) 或 "module"(如果你的代码是 ECMAScript 模块)。 //导入导出的module
  • ecmaFeatures - 这是个对象,表示你想使用的额外的语言特性,参数如下:
    • globalReturn - 允许在全局作用域下使用 return 语句
    • impliedStrict - 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
    • jsx - 启用 JSX
    • experimentalObjectRestSpread - 启用实验性的 object rest/spread properties 支持。(重要:这是一个实验性的功能,在未来可能会有明显改变。 建议你写的规则 不要 依赖该功能,除非当它发生改变时你愿意承担维护成本。)

.eslintrc.json 文件示例:

{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "semi": 2
    }
}

设置解析器选项能帮助 ESLint 确定什么是解析错误,所有语言选项默认都是 false。

Specifying Parser 指定解析器

ESLint 默认使用Espree作为其解析器,你可以在配置文件中指定一个不同的解析器,只要该解析器符合下列要求:

  1. 它必须是本地安装的一个 npm 模块。
  2. 它必须有兼容 Esprima 的接口(它必须输出一个 parse() 方法)
  3. 它必须产出兼容 Esprima 的 AST 和 token 对象。

以下解析器与 ESLint 兼容:

  • Esprima
  • Babel-ESLint - 一个对Babel解析器的包装,使其能够与 ESLint 兼容。
  • typescript-eslint-parser(实验) - 一个把 TypeScript 转换为 ESTree 兼容格式的解析器,这样它就可以在 ESLint 中使用了。这样做的目的是通过 ESLint 来解析 TypeScript 文件(尽管不一定必须通过所有的 ESLint 规则)。

注意,在使用自定义解析器时,为了让 ESLint 在处理非 ECMAScript 5 特性时正常工作,配置属性 parserOptions 仍然是必须的。解析器会被传入 parserOptions,但是不一定会使用它们来决定功能特性的开关。

Specifying Environments 指定环境变量

一个环境定义了一组预定义的全局变量。可用的环境包括:

browser - 浏览器环境中的全局变量。
node - Node.js 全局变量和 Node.js 作用域。
更多详见https://eslint.bootcss.com/docs/user-guide/configuring/#configuration-file-formats
这些环境并不是互斥的,所以你可以同时定义多个。
要在你的 JavaScript 文件中使用注释来指定环境,格式如下:

/* eslint-env node, mocha */
 ...代码片段

要在配置文件里指定环境,使用 env 关键字指定你想启用的环境,并设置它们为 true。例如,以下示例启用了 browser 和 Node.js 的环境:

{
    "env": {
        "browser": true, //引入window,document等全局变量时就不会报错
        "node": true
    }
}

或在 package.json 文件中:

{
    "name": "mypackage",
    "version": "0.0.1",
    "eslintConfig": {
        "env": {
            "browser": true,
            "node": true
        }
    }
}

在 YAML 文件中:

---
  env:
    browser: true
    node: true

如果你想在一个特定的插件中使用一种环境,确保提前在 plugins 数组里指定了插件名,然后在 env 配置中不带前缀的插件名后跟一个 / ,紧随着环境名。例如:

{
    "plugins": ["example"],
    "env": {
        "example/custom": true
    }
}

或在 package.json 文件中

{
    "name": "mypackage",
    "version": "0.0.1",
    "eslintConfig": {
        "plugins": ["example"],
        "env": {
            "example/custom": true
        }
    }
}

在 YAML 文件中:

---
  plugins:
    - example
  env:
    example/custom: true

Configuring Plugins 插件配置

ESLint 支持使用第三方插件。在使用插件之前,你必须使用 npm 安装它。

在配置文件里配置插件时,可以使用 plugins 关键字来存放插件名字的列表。插件名称可以省略 eslint-plugin- 前缀。
{
"plugins": [
"plugin1",
"eslint-plugin-plugin2"
]
}
在 YAML 中:


plugins:
- plugin1
- eslint-plugin-plugin2
注意:由于 Node.js 的 require 函数的行为,全局安装的 ESLint 实例只能使用全局安装的 ESLint 插件,本地安装的版本,只能用 本地安装 的插件。不支持混合本地和全局插件。

Configuration File Formats 配置文件格式

ESLint 支持几种格式的配置文件:

JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。
YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
JSON - 使用 .eslintrc.json 去定义配置的结构,ESLint 的 JSON 文件允许 JavaScript 风格的注释。
(弃用) - 使用 .eslintrc,可以使 JSON 也可以是 YAML。
package.json - 在 package.json 里创建一个 eslintConfig属性,在那里定义你的配置。
如果同一个目录下有多个配置文件,ESLint 只会使用一个。优先级顺序如下:

.eslintrc.js
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
.eslintrc
package.json

你可能感兴趣的:(ESLint配置)