ESLint

优先级

如果同一个目录中同时包含多个配置文件，则会按照以下优先级，使用高优先级中的配置：

yaml 复制代码

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

配置的集联(Cascading)与继承(Hierarchy)

yaml 复制代码

your-project
├── .eslintrc.json
├── lib
│ └── source.js
└─┬ tests
  ├── .eslintrc.json
  └── test.js

**注意：**根目录指的是~/。

子目录.eslintrc合并父目录.eslintrc

当子目录进行ESLint时，会向上查找所有的.eslintrc配置并进行**合并**，直到找到根目录或者在其中一个.eslintrc配置中配置了 root: true。

子目录.eslintrc覆盖eslintConfig

当 package.json文件中配置了 eslintConfig时，该配置会对所有当面目录的子目录文件生效。但如果子目录 中包含了自己的 .eslintrc，则 .eslintrc 会**覆盖** eslintConfig配置中的冲突项。

根目录.eslintrc取代eslintConfig

当前目录中如果同时拥有.eslintrc，并且在package.json文件中配置了 eslintConfig，则会使用.eslintrc中的配置。**eslintConfig**中的配置不会生效。

阻止子目录.eslintrc与父目录的配置项合并

如果不想让自己的.eslintrc受到父目录中的配置干扰，则可在.eslintrc中添加root: true，这样 ESLint就会停止向上查找配置。

json 复制代码

{
    "root": true
}

extends：一个成熟的lint配置方案

extends 其实就是一个完整的.eslintrc配置，拥有一套已经配好的lint规则。
extends中既可以直接使用第三方的lint库，也可以直接使用plugins中的配置，此时无需在plugins中引入插件。
extends可以直接使用本地规则文件。
extends有两种使用模式：
- 字符串模式。指定要使用的唯一规则。
- 数组模式。可以指定多个规则，后面的规则会扩展前面的规则。

字符串模式

json 复制代码

{
  "extends": "plugin:react/recommended"
}

数组模式

json 复制代码

{
  "extends": [
    "eslint-config-egg", 
    "plugin:@foo/common-rules/recommended"，
    "./node_modules/coding-standard/eslintDefaults.js",
    "./node_modules/coding-standard/.eslintrc-es6",
    "./node_modules/coding-standard/.eslintrc-jsx"
  ]
}

如果使用的规则是以eslint-config-打头的，则在配置 extends时，前缀可以省略。比如：eslint-config-egg被省略为egg。

json 复制代码

{
  "extends": ["egg", "plugin:@foo/common-rules/recommended"]
}

使用本地配置方案

javascript 复制代码

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: [ '@typescript-eslint' ],
  extends: [
    './index.js',
    './lib/rules/typescript.js',
  ],
};

extends 实例

javascript 复制代码

'use strict';

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: [ '@typescript-eslint' ],
  extends: [
    './index.js',
    './lib/rules/typescript.js',
  ],
};

plugins配置

如果直接使用插件中配置好的规则集，可以不在 **plugins**里面引入插件。

引入插件后必须要在具体的配置例如extends``rules等中使用才能生效。

plugins在使用时可以省略eslint-plugin-前缀。

在扩展plugins的规则时，需要在extends中按照如下规则指定规则：

（举例："plugin:@foo/foo/recommended"）

plugin:
包名：可以省略前缀，比如（ react is short for eslint-plugin-react）
/
具体配置名 (for example, recommended)

plugins 示例

javascript 复制代码

module.exports = {
  environments: {
    jquery: {
      globals: {
        $: false
      }
    }
  },
  configs: {
    recommended: {
      plugins: [
        '@foo/eslint-plugin-common-rules'
      ],
      rules: {
        '@foo/common-rules/leap-year-formulae': 1,
        '@foo/common-rules/no-builtin-date-parse': 1,
        '@foo/common-rules/no-builtin-date-set': 1,
        '@foo/common-rules/no-literal-date-numbers': 1
      }
    }
  },
  rules: {
  	"dollar-sign": {
        create: function (context) {
          // rule implementation ...
        }
     }

	}
}

使用 plugins

json 复制代码

{
    // ...
    "plugins": [
        "jquery",   // eslint-plugin-jquery
        "@foo/foo", // @foo/eslint-plugin-foo
        "@bar"      // @bar/eslint-plugin
    ],
    "extends": [
        "plugin:@foo/foo/recommended",
        "plugin:@bar/recommended"
    ],
    "rules": {
        "jquery/a-rule": "error",
        "@foo/foo/some-rule": "error",
        "@bar/another-rule": "error"
    },
    "env": {
        "jquery/jquery": true,
        "@foo/foo/env-foo": true,
        "@bar/env-bar": true,
    }
    // ...
}

json 复制代码

{
    "plugins": ["a-plugin"],
    "overrides": [
        {
            "files": ["*.md"],
            "processor": "a-plugin/markdown"
        },
        {
            "files": ["**/*.md/*.js"],
            "rules": {
                "strict": "off"
            }
        }
    ]
}

注意： plugins中的react实际是eslint-plugin-react的缩写。

rules：单规则配置

在rules中可以基于extends中的规则进行修改和补充。

可用值：

"off" or 0 - turn the rule off
"warn" or 1 - turn the rule on as a warning (doesn't affect exit code)
"error" or 2 - turn the rule on as an error (exit code is 1 when triggered)

覆盖规则

如果规则配置项是通过数组形式配置的，则使用数组模式会**覆盖**对应规则的配置项。

Base config: "quotes": $"error", "single", "avoid-escape"$
Derived config: "quotes": $"error", "single"$
Resulting actual config: "quotes": $"error", "single"$

修改规则

如果规则配置项是通过对象形式配置的，则使用数组模式是对基础配置的补充。

Base config: "max-lines": $"error", { "max": 200, "skipBlankLines": true, "skipComments": true }$
Derived config: "max-lines": $"error", { "max": 100 }$
Resulting actual config: "max-lines": $"error", { "max": 100 }$ where skipBlankLines and skipComments default to false

修改规则中未涉及的参数，将按默认值处理。

修改严格模式

使用字符串模式可以修改对应规则的**严格模式**。

Base config: "eqeqeq": $"error", "allow-null"$
Derived config: "eqeqeq": "warn"
Resulting actual config: "eqeqeq": $"warn", "allow-null"$

注释规则项

全局注释

全局禁用

整个文件都不再使用指定规则进行校验。

javascript 复制代码

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

alert('foo');
console.log('bar');

//////////////////////////////////////////////////

// 如果没有指定规则，则会禁用所有规则校验
/* eslint-disable */
alert('foo');

注意：使用 /* eslint-disable */时，需要将其放在文件的第一行。

全局启用

javascript 复制代码

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

alert('foo');
console.log('bar');

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

//////////////////////////////////////////////////

/* eslint-disable */

alert('foo');

/* eslint-enable */

行注释

禁用特定行

也有两种模式，禁用指定规则和禁用所有规则。

javascript 复制代码

// 禁用所有规则
alert('foo'); // eslint-disable-line

//////////////////////////////////////////////////

// 禁用指定规则
alert('foo'); // eslint-disable-line no-alert

禁用下一行

javascript 复制代码

/* eslint-disable-next-line */
alert('foo');

//////////////////////////////////////////////////

// eslint-disable-next-line no-alert
alert('foo');

禁用插件中的规则

javascript 复制代码

foo(); // eslint-disable-line example/rule-name
foo(); /* eslint-disable-line example/rule-name */

example: 对应的插件名称。

rule-name: 对应的规则名称。

取消所有内联配置注释

如果noInlineConfig设为 true，则上述内联配置注释就会报错。

json 复制代码

{
  "rules": {...},
  "noInlineConfig": true
}

报告未使用的`eslint-disable`注释

如果设为true，则没有起到作用的内联配置注释就会warn。

json 复制代码

{
  "rules": {...},
  "reportUnusedDisableDirectives": true
}

overrides配置

overrides的作用是针对符合overrides中匹配条件的文件，使用overrides中的规则进行lint。这样的好处是，可以在同一份配置文件中，针对不同的文件使用不同的lint规则 。overrides中的配置只是对普通规则的扩展。具体用法如下：

json 复制代码

{
  "rules": {
    "quotes": ["error", "double"]
  },

  "overrides": [
    {
      "files": ["bin/*.js", "lib/*.js"],
      "excludedFiles": "*.test.js",
      "rules": {
        "quotes": ["error", "single"]
      }
    }
  ]
}

files中使用的是基于.eslintrc.js文件的相对路径。
overrides中的规则优先级高于普通规则。
如果overrides中定义了多条配置，同时作用于同一个文件，则排在后面的配置优先级较高。
overrides配置中除了不能使用root和ignorePatterns之外，可以使用任何其他的规则。

注意： 使用overrides时，一定要添加files来限定规则的适用范围。

取消对特定文件的 lint

配置不需要进行ESLint的文件。文件路径匹配规则

在单独文件中配置--`.eslintignore`

单独创建一个.eslintignore文件，将不需要lint的文件列举出来。

.eslintignore中**默认不会将****node_modules/**** 和以****.****开头的文件进行lint**，因此这类文件不需要特别指出。举例：

bash 复制代码

# Valid
/root/src/*.js

在`.eslintrc`文件中配置--`ignorePatterns`

json 复制代码

{
    "ignorePatterns": ["temp.js", "**/vendor/*.js"],
    "rules": {
        //...
    }
}

在`package.json`文件中配置--`eslintIgnore`

json 复制代码

{
  "name": "mypackage",
  "version": "0.0.1",
  "eslintConfig": {
      "env": {
          "browser": true,
          "node": true
      }
  },
  "eslintIgnore": ["hello.js", "world.js"]
}

env--引入对应环境中的全局变量

环境配置可以直接使用对应环境中预定义的全局变量。使用示例：

json 复制代码

{
  "env": {
    "browser": true,
    "node": true
  }
}

globals--自定义全局变量

globals中可以定义可使用的全局变量。

定义变量可用的字段：因为历史原因，也支持以下用法，但是建议还是使用writable和 readonly

writable：可读可写。(true, writeable)
readonly：只读。(false, readable)
off：禁止使用。

json 复制代码

{
  "globals": {
    "Vue": false,
    "window": true,
    "AlipayJSBridge": true,
    "Ali": true,
    "Tracert": true,
    "require": true,
    "Promise": "off"
  }
}

parserOptions配置

parseOptions中可以定义ESLint中支持的语法。详细配置

json 复制代码

{
  "parserOptions": {
    "ecmaVersion": "latest", // 默认为5。
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "semi": "error"
  }
}

注意：在 parseOptions中支持了 jsx 并不意味着支持了React。如果想要支持React，还需要额外使用eslint-plugin-react。

sourceType - set to "script" (default) or "module" if your code is in ECMAScript modules.
ecmaVersion - set to 3, 5 (default), 6, 7, 8, 9, 10, 11, 12, or 13 to specify the version of ECMAScript syntax you want to use
allowReserved - allow the use of reserved words as identifiers (if ecmaVersion is 3).
ecmaFeatures - an object indicating which additional language features you'd like to use:
- globalReturn - allow return statements in the global scope
- impliedStrict - enable global strict mode (if ecmaVersion is 5 or greater)
- jsx - enable JSX

优先级

配置的集联(Cascading)与继承(Hierarchy)

子目录.eslintrc合并父目录.eslintrc

子目录.eslintrc覆盖eslintConfig

根目录.eslintrc取代eslintConfig

阻止子目录.eslintrc与父目录的配置项合并

extends：一个成熟的lint配置方案

使用本地配置方案

extends 实例

plugins配置

plugins 示例

使用 plugins

rules：单规则配置

覆盖规则

修改规则

修改严格模式

注释规则项

全局注释

全局禁用

全局启用

行注释

禁用特定行

禁用下一行

禁用插件中的规则

取消所有内联配置注释

报告未使用的eslint-disable注释

overrides配置

取消对特定文件的 lint

在单独文件中配置--.eslintignore

在.eslintrc文件中配置--<font style="color:rgb(51, 51, 51);">ignorePatterns</font>

在package.json文件中配置--eslintIgnore

env--引入对应环境中的全局变量

globals--自定义全局变量

parserOptions配置

报告未使用的`eslint-disable`注释

在单独文件中配置--`.eslintignore`

在`.eslintrc`文件中配置--`<font style="color:rgb(51, 51, 51);">ignorePatterns</font>`

在`package.json`文件中配置--`eslintIgnore`