ESLint 配置文件介绍

Question

您可以 配置 ESLint 使用以下任一 .eslint.* 文件或 eslintConfig 你的选项 package.json 文件。 您的 .eslint.* 文件可能是 .eslintrc.json、.eslintrc.js 或者 .eslintrc.yml 文件。

下面是一个简单的 .eslintrc.json 文件，使 no-unused-vars ESLint 规则 ：

{
  "parserOptions": {
    "ecmaVersion": 2020
  },
  "rules": {
    "no-unused-vars": "error"
  }
}

您还可以将 ESLint 配置定义为导出文件的 JavaScript 对象。 下面是等价的 .eslintrc.js 文件。

module.exports = {
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    no-unused-vars: 'error'
  }
};

如果你更喜欢 YAML ，你也可以写一个 .eslintrc.yml 文件。

parserOptions:
  ecmaVersion: 2020
rules:
  no-unused-vars: error

给定上述每个 ESLint 配置文件，在下面的脚本上运行 ESLint test.js 将打印 message' is assigned a value but never used 错误。

const message = 'Hello, World';

Below is the output when you run eslint from the command line on the above test.js file.

$ ./node_modules/.bin/eslint ./test.js 

/scratch/test.js
  1:7  error  'message' is assigned a value but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

$ 

规则

这 rules选项是最重要的。 ESLint 规则 允许您配置 ESLint 将哪些模式视为错误或警告。 这 rulesoption 是从 ESLint 规则名称到规则配置的映射。 规则配置可以是字符串或数组。

如果规则配置是一个字符串，它必须是 'off', 'warn'， 或者 'error'. 'off' 告诉 ESLint 忽略给定的规则。 'warn' 告诉 ESLint 将违反给定的行为视为警告。 和 'error' 告诉 ESLint 在违反给定规则时出错。 例如，下面是一个 .eslintrc.json对待 no-unused-vars 作为警告。

{
  "parserOptions": {
    "ecmaVersion": 2020
  },
  "rules": {
    "no-unused-vars": "warn"
  }
}

如果规则配置是一个数组，那么数组的第一个元素必须是一个字符串（或者 'off', 'warn'， 或者 'error'），第二个元素是配置该单独规则的选项。 例如下面 .eslintrc.json 当任何代码行长度超过 66 个字符时，使用 max-len 规则 。

{
  "parserOptions": {
    "ecmaVersion": 2020
  },
  "rules": {
    "max-len": ["error", { "code": 66 }]
  }
}

使用 extends

列出你想使用的每一条 ESLint 规则通常是不可行的，所以 ESLint 提供了一个 extends选项 允许您扩展现有 ESLint 配置并进行覆盖的，出于实际目的，我们建议使用 ESLint 的内置 eslint:recommended如果您正在构建自己的 ESLint 配置，则将配置作为起点。

{
  "extends": "eslint:recommended"
}

你可以 在 ESLint 的推荐配置中找到完整的规则列表 。
你可以通过指定你自己的来覆盖 ESLint 推荐配置中的个别规则 rules 属性。
例如，下面的 ESLint 配置使用推荐的配置， 除了 禁用 no-undef 规则。

{
  "extends": "eslint:recommended",
  "rules": {
    "no-undef": "off"
  }
}

解析器选项

这 parserOptions config 选项告诉 ESLint 你的目标是什么版本的 JavaScript。 例如，以下 JavaScript 在您设置时有效 parserOptions.ecmaVersion 至 2017：

(async function() {
  console.log('Hello, World!');
})();

然而，如果你改变 parser.ecmaVersion 至 2016，ESLint 将失败并出现以下错误，因为 ES2017 中引入了异步函数。

$ ./node_modules/.bin/eslint ./test.js 

/scratch/test.js
  1:8  error  Parsing error: Unexpected token function

✖ 1 problem (1 error, 0 warnings)

$ 

ESLint 还内置了对 JSX 。
例如，假设您有以下 test.js文件：

const hello = () => <h1>Hello, World</h1>;

通常，ESLint 会抛出错误 Parsing error: Unexpected token < 在上面的脚本上。 但是你可以通过设置启用 JSX parserOptions.ecmaFeatures.jsx 至 true 如下所示。

{ 
  "parserOptions": {
    "ecmaVersion": 2020,
    "ecmaFeatures": {
      "jsx": false
    }
  }
} 

环境

只需指定 ecmaVersion 总是不够的。 不同的 JavaScript 运行时和框架具有不同的全局变量和语义。 例如，下面的脚本在 Node.js 中运行良好，但在浏览器中却不行，因为浏览器没有全局变量 process。

process.env.MESSAGE = 'Hello, World';

使用下面的 ESLint 配置，你会得到一个 process' is not defined 错误

{
  "parserOptions": {
    "ecmaVersion": 2020
  },
  "rules": {
    "no-undef": "error"
  }
}

但是一旦你告诉 ESLint 这个脚本将在 Node.js 中运行，使用 "env": { "node": true }，ESLint 不会在上面的脚本中出错。

{
  "parserOptions": {
    "ecmaVersion": 2020
  },
  "env": {
    "node": true
  },
  "rules": {
    "no-undef": "error"
  }
}

另一种常用的 env 是 browser，它告诉 ESLint 该脚本将在浏览器中运行。 这使您的脚本可以访问仅限浏览器的全局变量，例如 window。

{
  "parserOptions": {
    "ecmaVersion": 2020
  },
  "env": {
    "browser": true
  },
  "rules": {
    "no-undef": "error"
  }
}

ESLint 文档有 完整的支持环境列表 。

插件

ESLint 带有 各种各样的内置规则 ，但您也可以在 npm 上找到许多具有附加规则的插件。 许多 ESLint 插件为使用特定的库和框架提供了额外的规则。

例如， eslint-plugin-vue 提供了额外的 Vue 特定规则。 运行后 npm install eslint-plugin-vue，你可以添加一个列表 plugins 添加到包含 eslint-plugin-vue 的 ESLint 配置中，或者简称为 vue，因为 ESLint 足够聪明，可以为您添加 eslint-plugin- 前缀。

{
  "parserOptions": {
    "ecmaVersion": 2020
  },
  "plugins": ["eslint-plugin-vue"]
}

一旦你这样做了，你就可以访问特定于 Vue 的规则，比如 no-async-in-computed-properties，下面的 ESLint 配置打开 no-async-in-computed-properties 规则。

{
  "parserOptions": {
    "ecmaVersion": 2020
  },
  "plugins": ["eslint-plugin-vue"],
  "rules": {
    "vue/no-async-in-computed-properties": "error"
  }
}

如果你在下面运行 ESLint test.js 文件 vue/no-async-in-computed-properties 规则会出错，因为 badProperty 设置为异步函数：

const Vue = require('vue');

module.exports = Vue.component('bad-component', {
  template: '<h1>Hello</h1>',
  computed: {
    badProperty: async function() { return 42; }
  }
});

$ ./node_modules/.bin/eslint ./test.js 

/scratch/test.js
  6:18  error  Unexpected async function declaration in "badProperty" computed property  vue/no-async-in-computed-properties

✖ 1 problem (1 error, 0 warnings)

$