ESLint配置文件.eslintrc参数说明

头像
记得要微笑
阅读 7 分钟
7

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: true
extends: 'eslint:recommended'
globals:
  Atomics: readonly
  SharedArrayBuffer: readonly
parserOptions:
  ecmaVersion: 2018
  sourceType: module
rules: {}
  • .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.js
module.exports = {
  "root": true,
  "env": {
    "node": true,
  },
  "extends": "eslint:recommended",
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "rules": {
  }
};
// src/index.js
window.temp = 'aaa'

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

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

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

/* eslint-env node, mocha */

我们在src/index.js文件里指定环境：
3.png
如果你想在一个特定的插件中使用一种环境，确保提前在 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.js
module.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.js
import 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.js
serverData = {
  shoppingCart: []
}

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

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

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

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

7、eslint中rules配置

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

  • "off"或0- 关闭规则
  • "warn"或1- 开启规则，使用警告级别的错误：warn(不会导致程序退出)
  • "error"或2- 开启规则，使用错误级别的错误：error(当被触发的时候，程序会退出)

为了在文件注释里配置规则，使用以下格式的注释：

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

在这个例子里，eqeqeq 规则被关闭，curly 规则被打开，定义为错误级别。你也可以使用对应的数字定义规则严重程度：

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

这个例子和上个例子是一样的，只不过它是用的数字而不是字符串。eqeqeq 规则是关闭的，curly 规则被设置为错误级别。

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

/* eslint quotes: ["error", "double"], curly: 2 */

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

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

eslint
记得要微笑
1.9k 声望4.5k 粉丝

知不足而奋进，望远山而前行，卯足劲，不减热爱。

« 上一篇
eslint-启动项目环境报console错误
下一篇 »
ESLint中如何用glob模式指定要检测的文件

引用和评论

被 1 篇内容引用
推荐阅读
头像
如何使用 webpack 优化 lodash

记得要微笑赞 1阅读 700

0 条评论
得票最新