ESLint配置详解(一) - 超级深入详细

如果项目目录下有多个配置文件，ESLint 只会使用一个，优先级为： .eslintrc.js > .eslintrc > package.json ，一般我们都是在 .eslintrc.js 配置。

同时，如果配置文件里没有 "root": true 这个属性，ESLint就会继续向外寻找配置文件，直到找到有 "root": true 的为止，所有这些配置文件的规则都会被层叠应用。若有重复的属性配置，则离文件更近的配置文件具有更高的优先级。

当想要所有项目都遵循一个特定的约定时会很有用，但还是建议给项目根目录的 .eslintrc.js 加上 root: true

1.1 extends - Extending Configuration Files

一个ESLint配置文件，一旦扩展了(即从外部引入了其他配置包)，就能继承另一个配置文件的所有属性(包括rules, plugins, and language option在内)，然后通过merge合并/覆盖所有原本的配置。

extends 属性的值可以是：

"eslint:recommended" 这个扩展包帮我们启用了一系列核心规则，这些规则是在 rules页面 中被标记为 ✅ 的常见问题。

ESLint插件 是可以给ESLint添加很多扩展规则的npm包，它可以执行很多方法，包括但不限于 添加新规则 和 导出 可共享配置 。

在添加到配置文件 (如 .eslintrc.js ) 的 plugins 的 时候，可以省略插件包名的 eslint-plugin- 前缀

在 extends 中插件字符串值则可以是：

插件包名的格式一般是 eslint-plugin-<plugin-name>，就像 eslint-plugin-prettier ；

也可能是含命名空间包的格式 @<scope>/eslint-plugin-<plugin-name>，例如 @vue/eslint-config-prettier；

甚至 @<scope>/eslint-plugin ，如 @jquery/eslint-plugin 。

通过extends设置的配置包加载的时候，是递归的形式去查找配置文件(最终是一个导出的对象，详细看 ② )，然后一步步派生继承的。

例如： extends: ["foo"] ，然后对应的 eslint-config-foo 有 plugins: ["bar"] , ESLint 会先找到 ./node_modules/ 下的 eslint-plugin-bar , (而不是 ./node_modules/eslint-config-foo/node_modules/)，更不会从祖先目录去查找。配置文件和基本配置中的每个插件都会唯一地解析。

按照上述规则，我们来梳理下 ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"] (vue-cli4 + ESLint + prettier 的 默认extends值)的配置文件分别在哪里。仅帮助加深理解。

我们再去项目根目录的 ./node_modules 找 eslint-plugin-prettier 和 eslint-config-prettier 插件，然后得知，@vue/prettier最终导入了 ./node_modules/eslint-config-prettier/index.js 、 ./node_modules/eslint-config-prettier/vue.js 和 ./node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js 的规则

parserOptions - Specifying Parser Options

指定你想要支持的 JavaScript 语言选项。默认支持 ECMAScript 5 语法。你可以覆盖该设置，以启用对 ECMAScript 其它版本和 JSX 的支持。

3.1 rules - Configuring Rules

ESLint 拥有大量的规则。你可以通过配置插件添加更多规则。使用注释或配置文件修改你项目中要使用的规则。要改变一个规则，你必须将规则 ID 设置为下列值之一：

3.1.1 在文件注释里配置规则 (只在当前文件生效)

上面的例子， eqeqeq 规则被关闭， curly 规则被打开，且定义为错误级别。出于便于理解的考虑，可以用字符串值，如果很熟悉的话用对应的数字来定义也是一样的。

如果一个规则有额外的参数选项，你可以用数组字面量语法来指定它们，比如：

这条注释为规则 quotes 指定了 “double”选项。数组的第一项总是规则的严重程度（数字/字符串）

3.1.2 在配置文件配置规则

要配置定义在插件中的一个规则，你必须使用 插件名/规则ID 的形式。比如：

规则 plugin1/rule1 表示来自插件 plugin1 的 rule1 规则。当指定来自插件的规则时，确保删除 eslint-plugin- 前缀。ESLint 在内部只使用没有前缀的名称去定位规则。

4.1 parser - Specifying Parser

被指定的解析器必须是可以从它的配置文件中加载的Node模块。这意味着应该使用 npm 单独安装这个解析器包；它必须符合 parser interface 。

4.2 plugins - Configuring Plugins

ESLint支持使用第三方插件。要使用插件，必须先用npm进行安装。

要在配置文件中配置插件，可以用 plugins 属性，它的值是包含插件名称的列表(数组)。其中，插件名可以省略 eslint-plugin- 前缀(如果有的话)。

插件是根据配置文件(如 eslintrc.js )解析的。换句话说，ESLint会像通过运行 require('eslint-plugin-pluginname') 一样加载我们配置在 eslintrc.js 中的插件。所以要保证在这个包在当前配置文件的./node_modules/下找得到。

连着 extends 属性讲比较清楚，因此其他已经在上面 1.1.2 - 插件具体是如何实现扩展配置的 讲过了。

避免文章冗长又碍可读性又分篇了，指路：➡️ ESLint配置详解(二) - 常用规则(Rules)集合

使用ESlint

一、ESLint跟JSLint和JSHint类似，但有以下区别：

1.使用Espree进行js解析(parse)

2.用AST抽象语法树去识别(evaluate)代码中的模式3.每个规则都是独立的插件

二、安装

全局安装：

npm install -g eslint

三、使用

如果是第一次使用，eslint --init 命令帮你完成初始化，生成.eslintrc文件然后eslint test.js test2.js

四、配置

{

"rules": {

"semi": ["error", "always"],

"quotes": ["error", "double"]

}

}

提示有三个level：

"off" or 0 - 关闭这个规则校验

"warn" or 1 - 开启这个规则校验，但只是提醒，不会退出"error" or 2 - 开启这个规则校验，并退出

五、常见问题

1.为什么不用jslint

创建eslint是因为急需插件化的校验工具

2.ESLint跟JSHint、JSCS的比较

ESLint比JSlint要慢2~3倍，因为ESLint在识别代码前需要用Espress构建AST,而JSHint在解析的时候就会识别代码。虽然慢些，但不至于成为痛点。

ESLint比JSCS快，（as ESLint uses a single-pass traversal for analysis whereas JSCS using a querying model.）3.ESLint仅仅是校验还是也检查代码风格

都有。ESLint does both traditional linting (looking for problematic patterns) and style checking (enforcement of conventions). You can use it for both.

4.支持es6吗？

支持。参考配置eslint.org/docs/user-guide/configuring5.支持JSX？

支持，但并不表示支持React。（Yes, ESLint natively supports parsing JSX syntax (this must be enabled in configuration.). Please note that supporting JSX syntax is not the same as supporting React. React applies specific semantics to JSX syntax that ESLint doesn't recognize. We recommend using eslint-plugin-react if you are using React and want React semantics.）5.支持es7吗？

本身不支持，可以使用babel-eslint

六、下面详细介绍下配置，地址eslint.org/docs/user-guide/configuring1.配置ESLint

主要有两种方法配置

（1）配置注释，直接嵌入到js文件中

（2）配置文件，使用js、json或者yaml文件来为整个目录及其子目录配置。形式有：.eslintrc.*文件，或者在package.json中配置eslintConfig字段，或者在命令行里配置。

配置分几个方面：

（1）环境（env）：设置你的脚本的目标运行环境，如browser，amd，es6，commonjs等，每种环境有预设的全局变量（2）全局变量：增加的全局变量供运行时使用（3）规则（rules）：设定的规则及该规则对应的报错level2.配置解析器选项（Specifying Parser Options）默认仅支持ES5语法，可以设置为es6 es7 jsx等。

复制代码

{

"parserOptions": {

"ecmaVersion": 6, // 可选 3 5（默认） 6 7"sourceType": "module", // 可选script（默认） module"ecmaFeatures": {

"jsx": true

},

},

"rules": {

"semi": 2

}

}

复制代码

3.配置解析器（Specifying Parser），需要本地npm模块{

"parser": "esprima", // Espree(默认) Esprima Babel-ESLint"rules": { "semi": "error" } }

4.配置环境（Specifying Environments），可以多选复制代码

browser - browser global variables.

node - Node.js global variables and Node.js scoping.

commonjs - CommonJS global variables and CommonJS scoping (use this for browser-only code that uses Browserify/WebPack).

shared-node-browser - Globals common to both Node and Browser.

es6 - enable all ECMAScript 6 features except for modules.

worker - web workers global variables.

amd - defines require() and define() as global variables as per the amd spec.

mocha - adds all of the Mocha testing global variables.

jasmine - adds all of the Jasmine testing global variables for version 1.3 and 2.0.

jest - Jest global variables.

phantomjs - PhantomJS global variables.

protractor - Protractor global variables.

qunit - QUnit global variables.

jquery - jQuery global variables.

prototypejs - Prototype.js global variables.

shelljs - ShellJS global variables.

meteor - Meteor global variables.

mongo - MongoDB global variables.

applescript - AppleScript global variables.

nashorn - Java 8 Nashorn global variables.

serviceworker - Service Worker global variables.

atomtest - Atom test helper globals.

embertest - Ember test helper globals.

webextensions - WebExtensions globals.

greasemonkey - GreaseMonkey globals.

复制代码

如果要在待校验文件里面配置可以这样配置：

/*eslint-env node, mocha */

如果要在配置文件中配置：

{

"env": {

"browser": true,

"node": true

}

}

如果在package.json中配置：

复制代码

{

"name": "mypackage",

"version": "0.0.1",

"eslintConfig": {

"env": {

"browser": true,

"node": true

}

}

}

复制代码

如果在YAML中配置：

---

env:

browser: true

node: true

也可以用插件

{

"plugins": ["example"],

"env": {

"example/custom": true

}

}

5.配置全局变量（Specifying Globals）

定义了全局变量以后，使用他们，ESLint不会发出警告。

在js文件中定义：

/*global var1, var2*/

设置read only

/*global var1:false, var2:false*/

在配置文件中：

{

"globals": {

"var1": true,

"var2": false

}

}

6.配置插件（Configuring Plugins）

使用npm安装第三方插件

{

"plugins": [

"plugin1",

"eslint-plugin-plugin2"

]

}

7.配置规则（Configuring Rules）

js中配置：

/*eslint eqeqeq: "off", curly: "error"*/

或者：

/*eslint eqeqeq: 0, curly: 2*/

如果规则有多个选项：

/*eslint quotes: ["error", "double"], curly: 2*/在配置文件中设置：

复制代码

{

"rules": {

"eqeqeq": "off",

"curly": "error",

"quotes": ["error", "double"]

}

}

复制代码

使用插件：

复制代码

{

"plugins": [

"plugin1"

],

"rules": {

"eqeqeq": "off",

"curly": "error",

"quotes": ["error", "double"],

"plugin1/rule1": "error"

}

}

复制代码

/*eslint "plugin1/rule1": "error" */

临时关闭eslint校验：

/*eslint-disable */

//Disable all rules between comments

alert('foo')

/*eslint-enable */

/*eslint-disable no-alert, no-console */

alert('foo')

console.log('bar')

/*eslint-enable no-alert */

在js特定行关闭校验：

alert('foo')// eslint-disable-line

// eslint-disable-next-line

alert('foo')

alert('foo')// eslint-disable-line no-alert, quotes, semi// eslint-disable-next-line no-alert, quotes, semialert('foo')

8.增加共享设置（Adding Shared Settings）

{

"settings": {

"sharedData": "Hello"

}

}

9.使用配置文件

eslint -c myconfig.json myfiletotest.js

10.继承配置文件（Extending Configuration Files）复制代码

{

"extends": [

"./node_modules/coding-standard/eslintDefaults.js",// Override eslintDefaults.js

"./node_modules/coding-standard/.eslintrc-es6",// Override .eslintrc-es6

"./node_modules/coding-standard/.eslintrc-jsx",],

"rules": {

// Override any settings from the "parent" configuration"eqeqeq": "warn"

}

}

复制代码

11.忽略文件或目录(Ignoring Files and Directories)建立.eslintignore文件

复制代码

# /node_modules and /bower_components ignored by default# Ignore files compiled from TypeScript and CoffeeScript**/*.{ts,coffee}.js

# Ignore built files except build/index.jsbuild/

!build/index.js

一，使用合适的编辑器 / IDE。VSCode 用来开发 TS 非常不错，可以方便地查看各个变量、字段的类型信息。不过代码重构方面，WebStorm 功能更加丰富一些，提供了「重构变量名」、「移动文件的时候同步修改引入该文件的地方」、「调整方法参数签名」等功能。个人还是推荐 WebStorm 吧，合理使用上面这些功能可以大大提高重构效率。WebStorm 提供了对 TS 的支持，在 TypeScript 面板中会显示来自 tsserver 的代码诊断信息。

二，代码风格。原来代码风格比较乱的话，推荐使用 prettier，简单配置之后跑个命令行脚本（或者在 WebStorm 中调用 prettier 工具）就可以格式化所有代码了，比较省心。也可以用 ESLint 加上 --fix 参数，不过配置相对来说繁琐一些。

三，升级 TS，既然重构的话，TS 推荐直接升级到最新版（目前版本是 2.8），新版的 TS 类型表达能力更强一些，而且升级的 break changes 很少。在 tsconfig.json 中将 noImplicitAny 设置为 true（或者将 strict 设置为 true），完善之前缺失的类型信息。在变量类型都是清晰且确定的情况下，重构其实是挺简单的，所以先补充一下原来缺失的类型信息。如果某个类型需要后续重构的话，可以暂时使用 any，然后在旁边加个 TODO。

四，自底向上的组件重构。重构一些小组件的接口，完善其 props/state 类型信息。重构组件的实现之后，调整调用该组件的代码（WebStorm：Find Usages，然后根据 TS 报错信息填上正确的 props 即可）。一般来说，小组件的重构不会导致整个应用跑不起来，重构过程中可以在旁边打开前端应用，重构完成之后网页表现和原来一样的话就说明重构没啥问题。

五，自顶向下的状态重构。使用 React 的话，顶层组件的状态一般比较丰富，我们也往往会使用 Redux 来管理应用全局状态。许多子组件都会依赖这些全局状态（或是顶层组件的状态），所以最好使用 type/interface 关键字将这些状态的类型显式地写出来。例如下图就是一个前端应用的 Redux store 管理的状态。其他地方（例如调用 react-redux 的 connect 函数）使用 State 就能方便的引用该类型了。

---