ESLint配置文件.eslintrc参数说明

pony

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

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

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

默认情况下,ESLint 会在所有父级目录里寻找配置文件,一直到根目录。如果你想要你所有项目都遵循一个特定的约定时,这将会很有用,但有时候会导致意想不到的结果。为了将 ESLint 限制到一个特定的项目,在你项目根目录下的package.json文件或者.eslintrc.*文件里的eslintConfig字段下设置"root": trueESLint 一旦发现配置文件中有"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:recommendedeslint: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 语法并不等同于支持 ReactReactESLint 无法识别的JSX语法应用特定的语义。如果你正在使用 React 并且想要 React 语义支持,我们建议你使用eslint-plugin-react

6、eslint中globals配置

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

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

/* global var1, var2 */

这定义了两个全局变量,var1var2。如果你想选择性地指定这些全局变量可以被写入(而不是只被读取),那么你可以用一个 "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

阅读 5.4k
avatar
pony
前端工程师
655 声望
943 粉丝
0 条评论
你知道吗?

avatar
pony
前端工程师
655 声望
943 粉丝
宣传栏