ESLint配置文件.eslintrc参数说明 - SegmentFault 思否

来自 : segmentfault.com/a/11900000208 发布时间：2021-03-25

注册登录首页问答专栏资讯课程活动发现立即登录免费注册首页专栏eslint文章详情2ESLint配置文件.eslintrc参数说明

ToSmile发布于 2019-10-28 1、几种配置eslint的方式.eslintrc.js

module.exports = { \"env\": { \"browser\": true, \"es6\": true, \"node\": true }, \"extends\": \"eslint:recommended\", \"globals\": { \"Atomics\": \"readonly\", \"SharedArrayBuffer\": \"readonly\" }, \"parserOptions\": { \"ecmaVersion\": 2018, \"sourceType\": \"module\" }, \"rules\": { }};

.eslintrc.yaml

env: browser: true es6: true node: trueextends: \'eslint:recommended\'globals: Atomics: readonly SharedArrayBuffer: readonlyparserOptions: ecmaVersion: 2018 sourceType: modulerules: {}

.eslintrc.json（ESLint的JSON文件允许JavaScript风格的注释）

{ \"name\": \"three\", \"version\": \"1.0.0\", \"description\": \"\", \"main\": \"index.js\", \"scripts\": { \"test\": \"echo \\\"Error: no test specified\\\" exit 1\" }, \"keywords\": [], \"author\": \"\", \"license\": \"ISC\", \"devDependencies\": { \"eslint\": \"^6.6.0\" }}

package.json（在package.json里创建一个eslintConfig属性，在那里定义你的配置）

{ \"name\": \"four\", \"version\": \"1.0.0\", \"description\": \"\", \"main\": \"index.js\", \"scripts\": { \"test\": \"echo \\\"Error: no test specified\\\" exit 1\" }, \"keywords\": [], \"author\": \"\", \"license\": \"ISC\", \"devDependencies\": { \"eslint\": \"^6.6.0\" }, \"eslintConfig\": { \"env\": { \"browser\": true, \"es6\": true, \"node\": true }, \"extends\": \"eslint:recommended\", \"globals\": { \"Atomics\": \"readonly\", \"SharedArrayBuffer\": \"readonly\" }, \"parserOptions\": { \"ecmaVersion\": 2018, \"sourceType\": \"module\" }, \"rules\": { } }}

层叠配置（不同文件采用不同的规则）

当使用.eslintrc.*和package.json文件的配置时，你可以利用层叠配置。例如，假如你有以下结构：

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

层叠配置使用离要检测的文件最近的.eslintrc文件作为最高优先级，然后才是父目录里的配置文件，等等。当你在这个项目中允许 ESLint 时，lib/下面的所有文件将使用项目根目录里的.eslintrc文件作为它的配置文件。当 ESLint 遍历到test/目录，your-project/.eslintrc之外，它还会用到your-project/tests/.eslintrc。所以your-project/tests/test.js是基于它的目录层次结构中的两个.eslintrc文件的组合，并且离的最近的一个优先。通过这种方式，你可以有项目级 ESLint 设置，也有覆盖特定目录的 ESLint 设置。

同样的，如果在根目录的package.json文件中有一个eslintConfig字段，其中的配置将使用于所有子目录，但是当tests目录下的.eslintrc文件中的规则与之发生冲突时，就会覆盖它。

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

如果同一目录下.eslintrc和package.json同时存在，.eslintrc优先级高会被使用，package.json文件将不会被使用。

注意：如果在你的主目录下有一个自定义的配置文件 (~/.eslintrc) ，如果没有其它配置文件时它才会被使用。因为个人配置将适用于用户目录下的所有目录和文件，包括第三方的代码，当 ESLint 运行时可能会导致问题。

默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。如果你想要你所有项目都遵循一个特定的约定时，这将会很有用，但有时候会导致意想不到的结果。为了将 ESLint 限制到一个特定的项目，在你项目根目录下的package.json文件或者.eslintrc.*文件里的eslintConfig字段下设置\"root\": true。ESLint 一旦发现配置文件中有\"root\": true，它就会停止在父级目录中寻找。

2、eslint中env配置

指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。比如node环境下有global全局变量，browser环境下有window全局变量，jquery环境下有$全局变量，es6环境下有Set等新特性全局变量。
例如，当在node环境下使用window变量eslint会报错

// .eslintrc.jsmodule.exports = { \"root\": true, \"env\": { \"node\": true, }, \"extends\": \"eslint:recommended\", \"globals\": { \"Atomics\": \"readonly\", \"SharedArrayBuffer\": \"readonly\" }, \"parserOptions\": { \"ecmaVersion\": 2018, \"sourceType\": \"module\" }, \"rules\": { }};// src/index.jswindow.temp = \'aaa\'

这些环境并不是互斥的，所以你可以同时定义多个。

可以在源文件里、在配置文件中或使用 命令行 的 --env 选项来指定环境。

要在你的 JavaScript 文件中使用注释来指定环境，格式如下：

/* eslint-env node, mocha */

我们在src/index.js文件里指定环境：

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

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

3、eslint中extends配置

一个配置文件可以被基础配置中的已启用的规则继承。

extends属性值可以是：

指定配置的字符串(配置文件的路径、可共享配置的名称、eslint:recommended或eslint:all)字符串数组：每个配置继承它前面的配置

ESLint递归地扩展配置，因此基本配置也可以具有extends属性。extends属性中的相对路径和可共享配置名从配置文件中出现的位置解析。

4、eslint中plugins配置

插件是一个 npm 包，通常输出规则。一些插件也可以输出一个或多个命名的配置。要确保这个包安装在 ESLint 能请求到的目录下。

plugins属性值可以省略包名的前缀eslint-plugin-。

extends属性值可以由以下组成：

plugin:包名 (省略了前缀，比如，react)配置名称 (比如recommended)

插件一个主要的作用就是补充规则，比如eslint:recommended中没有有关react的规则，则需要另外导入规则插件eslint-plugin-react

react项目中应用eslint:

//.eslintrc.jsmodule.exports = { \"env\": { \"browser\": true, \"es6\": true, \"node\": true \"extends\": [ \"eslint:recommended\", \"plugin:react/recommended\" \"globals\": { \"Atomics\": \"readonly\", \"SharedArrayBuffer\": \"readonly\" \"parserOptions\": { \"ecmaFeatures\": { \"jsx\": true \"ecmaVersion\": 2018, \"sourceType\": \"module\" \"plugins\": [ \"react\" \"rules\": { \"no-unused-vars\": \"off\"};

//./src/app.jsimport React from \'react\'import ReactDOM from \'react-dom\'class NameForm extends React.Component { constructor(props) { super(props) this.state = {value: \'\'} this.handleChange = this.handleChange.bind(this) this.handleSubmit = this.handleSubmit.bind(this) handleChange(e) { this.setState({value: e.target.value}) handleSubmit() { alert(`提交数据：${this.state.value}`) render() { return ( form onSubmit={this.handleSubmit}  label htmlFor=\"username\"  input id=\"username\" value={this.state.value} onChange={this.handleChange} /input  /label  input type=\"submit\" value=\"submit\" /input  /form ReactDOM.render( NameForm /NameForm , document.getElementById(\'root\'))

5、eslint中parserOptions配置

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

请注意，支持 JSX 语法并不等同于支持 React。React 对 ESLint 无法识别的JSX语法应用特定的语义。如果你正在使用 React 并且想要 React 语义支持，我们建议你使用eslint-plugin-react。

6、eslint中globals配置

当访问当前源文件内未定义的变量时，no-undef 规则将发出警告。如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。你可以使用注释或在配置文件中定义全局变量。

要在你的 JavaScript 文件中，用注释指定全局变量，格式如下：

/* global var1, var2 */

这定义了两个全局变量，var1 和 var2。如果你想选择性地指定这些全局变量可以被写入(而不是只被读取)，那么你可以用一个 \"writable\" 的标志来设置它们:

/* global var1:writable, var2:writable */

要在配置文件中配置全局变量，请将 globals 配置属性设置为一个对象，该对象包含以你希望使用的每个全局变量。对于每个全局变量键，将对应的值设置为 \"writable\" 以允许重写变量，或 \"readonly\" 不允许重写变量。例如：

{ \"globals\": { \"var1\": \"writable\", \"var2\": \"readonly\"}

例子：假设我们在某一个js文件中没有定义名为serverData的变量，而是当作全局变量使用，这时eslint检查将会报no-undef，表示没有这个全局变量。

// src/index.jsserverData = { shoppingCart: []}

解决方法：
1、在globals中配置该全局变量

\"globals\": { \"serverData\": true, \"Atomics\": \"readonly\", \"SharedArrayBuffer\": \"readonly\"},

2、在index.js文件中配置全局变量

/* global serverData:true */serverData = { shoppingCart: []}

7、eslint中rules配置

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