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'
文章图片
这些环境并不是互斥的，所以你可以同时定义多个。
可以在源文件里、在配置文件中或使用 命令行 的
--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-reactreact项目中应用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 (
)
}
}ReactDOM.render(
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 = https://www.it610.com/article/{
shoppingCart: []
}
文章图片
解决方法：
1、在
globals中配置该全局变量"globals": {
"serverData": true,
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},2、在
index.js文件中配置全局变量/* global serverData:true */
serverData = https://www.it610.com/article/{
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”选项。数组的第一项总是规则的严重程度（数字或字符串）。【ESLint配置文件.eslintrc参数说明】参考：
https://cn.eslint.org/docs/user-guide/configuring
