ESLint的使用 - ESLint

安装

npm install eslint --save-dev

.eslintrc.*文件的配置

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

除了package.json，其他的都是单独的配置文件。以package.json为例，配置eslintConfig

{
  "eslintConfig": {
    "env": {
      "browser": true,
      "node": true
      "jquery":true
    }，
    "rules": {
        "no-var": "off"
    }
  }
}

多个配置文件的优先级

.eslintrc.*如果放在项目的根目录中，则会作用于整个项目。如果在项目的子目录中也包含着.eslintrc文件，则对于子目录中文件的检查会忽略掉根目录中的配置，而直接采用子目录中的配置，这就能够在不同的目录范围内应用不同的检查规则，显得比较灵活。ESLint采用逐级向上查找的方式查找.eslintrc.文件，当找到带有”root”: true配置项的.eslintrc.文件时，将会停止向上查找

“extends”除了可以引入推荐规则，还可以以文件形式引入其它的自定义规则，然后在这些自定义规则的基础上用rules去定义个别规则，从而覆盖掉”extends”中引入的规则。例如：

{
    "extends": [
        // 引入根目录的eslint
        "../.eslintrc"
    ],
    // 配置子目录规则
    "rules": {
        "prefer-arrow-callback": "off",
        "prefer-template":"off",
        "no-var":"off",
        "vars-on-top":"off",
        "func-names":"off",
        "object-shorthand":"off"
    }
}

注释

直接在代码文件中以注释的方式定义

在js文件中，使用注释的方式定义eslint规则，优先级更高，如：

可以在你的文件中使用以下格式的块注释来临时禁止规则出现警告：

/* eslint-disable */
alert('foo');
/* eslint-enable */

你也可以对指定的规则启用或禁用警告:

/* eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');
/* eslint-enable no-alert, no-console */

如果在整个文件范围内禁止规则出现警告，将 / eslint-disable / 块注释放在文件顶部：

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

你也可以对整个文件启用或禁用警告:

/* eslint-disable no-alert */
// Disables no-alert for the rest of the file
alert('foo');

可以在你的文件中使用以下格式的行注释或块注释在某一特定的行上禁用所有规则：

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

在某一特定的行上禁用某个指定的规则：

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

在某个特定的行上禁用多个规则：

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

上面的所有方法同样适用于插件规则。例如，禁止 eslint-plugin-example 的 rule-name 规则，把插件名（example）和规则名（rule-name）结合为 example/rule-name：

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

注意：为文件的某部分禁用警告的注释，告诉 ESLint 不要对禁用的代码报告规则的冲突。ESLint 仍解析整个文件，然而，禁用的代码仍需要是有效的 JavaScript 语法。

参考：
https://cn.eslint.org/docs/user-guide/configuring