ESLint入门

ESLint是用于识别和报告ECMAScript / JavaScript代码中的模式的工具,目的是使代码更加一致并避免错误。在许多方面,它与JSLint和JSHint相似,但有一些例外:

  • ESLint使用Espree进行JavaScript解析。
  • ESLint使用AST评估代码中的模式。
  • ESLint是完全可插入的,每个规则都是一个插件,您可以在运行时添加更多内容。

    安装及使用

您可以使用npm或yarn安装ESLint:

  1. npm install eslint --save-dev
  2. # or
  3. yarn add eslint --dev

然后,您应该设置一个配置文件,最简单的方法是使用该--init标志:

  1. $ npx eslint --init
  2. # or
  3. $ yarn run eslint --init


注意:** --init假设您已经有一个package.json文件。如果不这样做,请确保先运行npm init还是先运行yarn init

之后,您可以在任何文件或目录上运行ESLint,如下所示:

  1. $ npx eslint yourfile.js
  2. # or
  3. $ yarn run eslint yourfile.js

也可以全局安装ESLint,而不是在本地安装(使用npm install eslint --global)。但是,不建议这样做,无论哪种情况,都必须在本地安装使用的任何插件或可共享配置。

配置

注意:如果您来自1.0.0之前的版本,请参阅迁移指南
运行后eslint --init,您.eslintrc.{js,yml,json}的目录中将有一个文件。在其中,您会看到一些配置如下的规则:

  1. {
  2. "rules": {
  3. "semi": ["error", "always"],
  4. "quotes": ["error", "double"]
  5. }
  6. }

名称"semi""quotes"是ESLint中规则的名称。第一个值是规则的错误级别,可以是以下值之一:

  • "off"0-关闭规则
  • "warn"1-将规则作为警告打开(不影响退出代码)
  • "error"2-将规则作为错误打开(退出代码将为1)

这三个错误级别使您可以细粒度控制ESLint如何应用规则(有关更多配置选项和详细信息,请参阅配置文档)。
您的.eslintrc.{js,yml,json}配置文件还将包括以下行:

  1. {
  2. "extends": "eslint:recommended"
  3. }

由于这一行,所有标记为“√“在对规则的页面将被打开。或者,你可以使用配置,其他人通过搜索创建‘eslint-config’ npmjs.com。除非你从一个共享的配置扩展或明确启用规则ESLint不会掉毛你的代码在您的配置中。

配置ESLint

ESLint旨在针对您的用例进行灵活配置。您可以关闭所有规则,仅使用基本语法验证来运行,或者混合并匹配捆绑的规则和自定义规则,以满足项目的需求。有两种配置ESLint的主要方法:

  1. 配置注释-使用JavaScript注释将配置信息直接嵌入文件中。
  2. 配置文件-使用JavaScript,JSON或YAML文件为整个目录及其所有子目录指定配置信息。这可以采用.eslintrc.*文件的形式,也可以采用package.json文件中的eslintConfig字段的形式,ESLint都会自动查找并读取它们,也可以在命令行上指定配置文件。

以下是一些您可以在ESLint中配置的选项:

  • 环境-您的脚本旨在在其中运行的环境。每个环境都附带了一组特定的预定义全局变量。
  • 全局变量-脚本在执行过程中访问的其他全局变量。
  • 规则-启用了哪些规则以及处于什么错误级别。
  • 插件-哪些第三方插件定义了ESLint使用的其他规则,环境,配置等。

所有这些选项使您可以细粒度地控制ESLint如何对待您的代码。

Configuration Files

配置文件格式

ESLint支持多种格式的配置文件:

  • JavaScript-使用.eslintrc.js和导出包含您的配置的对象。
  • JavaScript的(ESM) -使用.eslintrc.cjsJavaScript中运行包时ESLint指定"type":"module"他们package.json。请注意,ESLint目前不支持ESM配置。
  • YAML-使用.eslintrc.yaml.eslintrc.yml定义配置结构。
  • JSON -使用.eslintrc.json定义配置结构。ESLint的JSON文件还允许使用JavaScript样式的注释。
  • package.json-eslintConfigpackage.json文件中创建一个属性,然后在其中定义配置。

如果同一目录中有多个配置文件,则ESLint将仅使用一个。优先顺序如下:

  1. .eslintrc.js
  2. .eslintrc.cjs
  3. .eslintrc.yaml
  4. .eslintrc.yml
  5. .eslintrc.json
  6. package.json

    使用配置文件

    有两种使用配置文件的方法。
    使用配置文件的第一种方法是通过.eslintrc.*package.json文件。ESLint会在要插入文件的目录中以及在连续的父目录中一直到文件系统的根目录中自动寻找它们(除非root: true指定了)。当您希望为项目的不同部分提供不同的配置时,或者希望其他人能够直接使用ESLint而无需记住传递配置文件时,配置文件会很有用。
    使用配置文件的第二种方法是将文件保存在任意位置,然后使用以下--config选项将其位置传递给CLI :
  1. eslint -c myconfig.json myfiletotest.js

如果您正在使用一个配置文件,并且希望ESLint忽略任何.eslintrc.*文件,请确保--no-eslintrc-c标记一起使用。

配置文件中的注释

JSON和YAML配置文件格式均支持注释(package.json文件不应包含注释)。您可以将JavaScript样式的注释用于JSON文件,并将YAML样式的注释用于YAML文件。ESLint安全地忽略配置文件中的注释。这使您的配置文件更加人性化。

对于JavaScript样式的注释:

  1. {
  2. "env": {
  3. "browser": true
  4. },
  5. "rules": {
  6. // Override our default settings just for this directory
  7. "eqeqeq": "warn",
  8. "strict": "off"
  9. }
  10. }

对于YAML样式的注释:

  1. env:
  2. browser: true
  3. rules:
  4. # Override default settings
  5. eqeqeq: warn
  6. strict: off

添加共享设置

ESLint支持将共享设置添加到配置文件中。插件用于settings指定应在其所有规则之间共享的信息。您可以将settings对象添加到ESLint配置文件,它将被提供给正在执行的每个规则。如果您要添加自定义规则,并希望它们能够访问相同的信息并且易于配置,这可能会很有用。

在JSON中:

  1. {
  2. "settings": {
  3. "sharedData": "Hello"
  4. }
  5. }

在YAML中:

  1. ---
  2. settings:
  3. sharedData: "Hello"

级联和层次结构

使用.eslintrc.*package.json文件进行配置时,可以利用配置级联的优势。假设您具有以下结构:

  1. your-project
  2. ├── .eslintrc.json
  3. ├── lib
  4. └── source.js
  5. └─┬ tests
  6. ├── .eslintrc.json
  7. └── test.js

配置级联根据要插入的文件的位置工作。如果.eslintrc与被删除文件位于同一目录中,则该配置优先。然后,ESLint会搜索目录结构,合并.eslintrc沿途找到的所有文件,直至到达.eslintrc带有root: true或根目录的文件。
同样,如果package.json在根目录中有一个带有eslintConfig字段的文件,则该文件描述的配置将应用于其下的所有子目录,但在存在冲突的规范下.eslintrc,该tests/目录中文件描述的配置将覆盖该文件。

  1. your-project
  2. ├── package.json
  3. ├── lib
  4. └── source.js
  5. └─┬ tests
  6. ├── .eslintrc.json
  7. └── test.js

如果在同一目录中找到一个.eslintrcpackage.json文件,.eslintrc则将具有优先权,并且package.json将不使用该文件。

默认情况下,ESLint将在所有父文件夹中寻找配置文件,直到根目录为止。如果您希望所有项目都遵循某种约定,则这很有用,但有时会导致意外的结果。要将ESLint限制为特定项目,请将其"root": true放置在.eslintrc.*文件或文件的eslintConfig字段中,package.json或者放置.eslintrc.*在项目根目录下的文件中。一旦找到ESLint的配置,ESLint将停止在父文件夹中查找"root": true

  1. {
  2. "root": true
  3. }

在YAML中:

  1. ---
  2. root: true

例如,考虑在目录中的文件中设置了projectA哪个。在这种情况下,在linting时,将使用其中的配置,但不会使用其中的文件。"root": true``.eslintrc``lib/``main.js``lib/``.eslintrc``projectA/

  1. home
  2. └── user
  3. └── projectA
  4. ├── .eslintrc.json <- Not used
  5. └── lib
  6. ├── .eslintrc.json <- { "root": true }
  7. └── main.js

完整的配置层次结构,从最高优先级到最低优先级,如下所示:

  1. 内联配置
    1. /*eslint-disable*//*eslint-enable*/
    2. /*global*/
    3. /*eslint*/
    4. /*eslint-env*/
  2. 命令行选项(或CLIEngine等效项):
    1. --global
    2. --rule
    3. --env
    4. -c--config
  3. 项目级配置:
    1. .eslintrc.*package.json与插入文件位于同一目录中的文件
    2. 继续搜索.eslintrc.*,并package.json在祖先目录中的文件直至并包括根目录或直到一个配置"root": true中找到。

扩展配置文件

配置文件一旦扩展,就可以继承另一个配置文件的所有特征(包括规则,插件和语言选项)并修改所有选项。因此,存在三种配置,如下所示:

  • 基本配置:扩展的配置。
  • 派生配置:扩展基本配置的配置。
  • 产生的实际配置:将派生的配置合并到基本配置中的结果。

extends属性值为:

  • 指定配置的字符串(配置文件的路径,可共享配置的名称eslint:recommendedeslint:all)。
  • 字符串数组,其中每个其他配置都扩展了先前的配置

ESLint递归扩展配置,因此基本配置也可以具有extends属性。extends属性中的相对路径和可共享的配置名称是通过显示它们的配置文件的位置解析的。
eslint-config-可以从配置名称中省略该前缀。例如,airbnb解析为eslint-config-airbnb
rules属性可以执行以下任一操作来扩展(或覆盖)规则集:

  • 启用其他规则
  • 更改继承规则的严重性而不更改其选项:
    • 基本配置: "eqeqeq": ["error", "allow-null"]
    • 派生配置: "eqeqeq": "warn"
    • 产生的实际配置: "eqeqeq": ["warn", "allow-null"]
  • 覆盖来自基本配置的规则的选项:
    • 基本配置: "quotes": ["error", "single", "avoid-escape"]
    • 派生配置: "quotes": ["error", "single"]
    • 产生的实际配置: "quotes": ["error", "single"]

<br />

使用可共享的配置包

可共享的配置是一个NPM包出口的结构对象。确保已将软件包安装在项目的根目录中,以便ESLint可以要求它。
extends属性值可以省略eslint-config-包名称的前缀。
eslint --init命令可以创建配置,因此您可以扩展流行的样式指南(例如eslint-config-standard)。
YAML格式的配置文件示例:

  1. extends: standard
  2. rules:
  3. comma-dangle:
  4. - error
  5. - always
  6. no-empty: warn

使用 eslint:recommended

"eslint:recommended"extends属性中使用可启用报告常见问题的核心规则的子集(这些规则以复选标记标识在“规则”页面上)。
这是扩展eslint:recommended和覆盖某些设置配置选项的示例:
JavaScript格式的配置文件示例:

  1. module.exports = {
  2. "extends": "eslint:recommended",
  3. "rules": {
  4. // enable additional rules
  5. "indent": ["error", 4],
  6. "linebreak-style": ["error", "unix"],
  7. "quotes": ["error", "double"],
  8. "semi": ["error", "always"],
  9. // override configuration set by extending "eslint:recommended"
  10. "no-empty": "warn",
  11. "no-cond-assign": ["error", "always"],
  12. // disable rules from base configurations
  13. "for-direction": "off",
  14. }
  15. }

使用插件中的配置

插件是NPM包,可以添加各种扩展ESLint。插件可以执行许多功能,包括但不限于添加新规则和导出可共享配置。确保该软件包已安装在ESLint可能需要的目录中。
plugins 属性值可以省略eslint-plugin-包名称的前缀。
extends属性值可以包括:

  • plugin:
  • 软件包名称(例如,您可以省略前缀的react缩写eslint-plugin-react)。
  • /
  • 配置名称(例如recommended

JSON格式的配置文件示例:

  1. {
  2. "plugins": [
  3. "react"
  4. ],
  5. "extends": [
  6. "eslint:recommended",
  7. "plugin:react/recommended"
  8. ],
  9. "rules": {
  10. "react/no-set-state": "off"
  11. }
  12. }

使用配置文件

extends属性值可以是基本配置文件的绝对路径或相对路径。ESLint解析基本配置文件相对于使用它的配置文件的相对路径。
JSON格式的配置文件示例:

  1. {
  2. "extends": [
  3. "./node_modules/coding-standard/eslintDefaults.js",
  4. "./node_modules/coding-standard/.eslintrc-es6",
  5. "./node_modules/coding-standard/.eslintrc-jsx"
  6. ],
  7. "rules": {
  8. "eqeqeq": "warn"
  9. }
  10. }

使用 "eslint:all"

extends属性值可以"eslint:all"启用当前安装的ESLint版本中的所有核心规则。核心规则集可以在ESLint的任何次要或主要版本上更改。
重要说明:不建议将此配置用于生产环境,因为ESLint的每个次要和主要版本都会更改此配置。需要您自担风险使用它。

在决定项目的配置时,您可以启用所有核心规则作为探索规则和选项的捷径,尤其是在您很少覆盖选项或禁用规则的情况下。规则的默认选项不是ESLint认可的(例如,quotes规则的默认选项并不意味着双引号优于单引号)。

如果您的配置扩展了eslint:all,则在升级到ESLint的较新的主要版本或次要版本之后,请在使用命令行--fix上的选项之前查看报告的问题,以便您知道新的可修复规则是否会对代码进行更改。

JavaScript格式的配置文件示例:

  1. module.exports = {
  2. "extends": "eslint:all",
  3. "rules": {
  4. // override default options
  5. "comma-dangle": ["error", "always"],
  6. "indent": ["error", 2],
  7. "no-cond-assign": ["error", "always"],
  8. // disable now, but enable in the future
  9. "one-var": "off", // ["error", "never"]
  10. // disable
  11. "init-declarations": "off",
  12. "no-console": "off",
  13. "no-inline-comments": "off",
  14. }
  15. }

基于Glob模式的配置

v4.1.0 +。有时,例如,如果同一目录中文件的配置必须不同,则需要进行更精细控制的配置。因此,您可以overrides使用与在命令行上传递的格式相同的格式,在仅适用于匹配特定glob模式的文件的键下提供配置app/**/*.test.js

替代如何工作?

使用overrides键可以根据配置中的文件全局模式来覆盖设置。使用overrides密钥的示例如下:
在您的.eslintrc.json

  1. {
  2. "rules": {
  3. "quotes": ["error", "double"]
  4. },
  5. "overrides": [
  6. {
  7. "files": ["bin/*.js", "lib/*.js"],
  8. "excludedFiles": "*.test.js",
  9. "rules": {
  10. "quotes": ["error", "single"]
  11. }
  12. }
  13. ]
  14. }

以下是替代在配置文件中的工作方式:

  • 模式是针对相对于配置文件目录的文件路径应用的。例如,如果您的配置文件具有路径/Users/john/workspace/any-project/.eslintrc.js,而您要整理的文件具有路径/Users/john/workspace/any-project/lib/util.js,则将.eslintrc.js根据相对路径执行其中提供的模式lib/util.js
  • 与相同配置文件中的常规配置相比,全局模式替代具有更高的优先级。同一配置中的多个替代将按顺序应用。也就是说,配置文件中的最后一个覆盖块始终具有最高优先级。
  • 全局特定的配置几乎与任何其他ESLint配置相同。覆盖块可以包含在常规配置中有效的任何配置选项,但root和除外ignorePatterns
    • 特定于全局的配置可以有一个extends设置,但是root扩展配置中的属性将被忽略。ignorePatterns扩展配置中的属性仅用于与glob特定配置匹配的文件。
    • overrides仅当父配置和子配置的glob模式匹配时,才会套用嵌套设置。当扩展配置具有overrides设置时,这是相同的。
  • 可以在一个替代块中提供多个glob模式。文件必须至少与所提供的一种模式匹配,配置才能应用。
  • 覆盖块还可以指定要从匹配项中排除的模式。如果文件与任何排除的模式匹配,则该配置将不适用。

    相对水样

    1. project-root
    2. ├── app
    3. ├── lib
    4. ├── foo.js
    5. ├── fooSpec.js
    6. ├── components
    7. ├── bar.js
    8. ├── barSpec.js
    9. ├── .eslintrc.json
    10. ├── server
    11. ├── server.js
    12. ├── serverSpec.js
    13. ├── .eslintrc.json
    中的配置app/.eslintrc.json定义了glob模式**/*Spec.js。此模式相对于的基本目录app/.eslintrc.json。因此,此模式将匹配app/lib/fooSpec.jsapp/components/barSpec.js 匹配server/serverSpec.js。如果您在.eslintrc.json文件project-root夹中的文件中定义了相同的模式,则它将匹配所有三个*Spec文件。
    如果通过--configCLI选项提供了配置,则配置中的全局模式是相对于当前工作目录而不是给定配置的基本目录的。例如,如果--config configs/.eslintrc.json存在,则配置中的全局模式是相对于.而不是./configs

    指定目标文件

    如果您使用CLI指定目录(例如eslint lib),则ESLint会在目录中搜索目标文件以查找lint。目标文件是*.js或与任何overrides条目匹配的文件(但不包括任何以files结尾的条目*)。
    如果您指定了--ext命令行选项和目录,则目标文件仅是具有指定文件扩展名的文件,而与overrides条目无关。

    个人配置文件(不建议使用)

    feature️此功能已被弃用。此功能将在8.0.0版本中删除。如果要继续使用个人配置文件,请使用--configCLI选项。有关此决定的更多信息,请参见RFC 28RFC 32
    ~/指的是您首选操作系统上当前用户的主目录。这里所指的个人配置文件是~/.eslintrc.*文件,当前与其他配置文件以不同的方式进行处理。

    ESLint如何找到个人配置文件?

    如果eslint在项目中找不到任何配置文件,则eslint加载~/.eslintrc.*文件。
    如果eslint可以在项目中找到配置文件,则即使文件位于项目目录的祖先目录中,也将eslint忽略该~/.eslintrc.*文件。

    个人配置文件的行为如何?

    ~/.eslintrc.* 文件的行为与常规配置文件相似,但有一些例外:
    ~/.eslintrc.*文件从~/node_modules/(类似于)require()用户主目录中加载可共享的配置和自定义解析器。请注意,它不会加载全局安装的软件包。
    ~/.eslintrc.*``$CWD/node_modules默认情况下,文件从加载插件,以便唯一地标识插件。如果要对~/.eslintrc.*文件使用插件,则必须在每个项目的本地安装插件。或者,您可以使用--resolve-plugins-relative-toCLI选项更改ESLint加载插件的位置。

Language Options

指定环境

环境提供了预定义的全局变量。可用环境为:

  • browser -浏览器全局变量。
  • node -Node.js全局变量和Node.js作用域。
  • commonjs -CommonJS全局变量和CommonJS作用域(将其用于使用Browserify / WebPack的仅浏览器代码)。
  • shared-node-browser -Node.js和浏览器通用的全局变量。
  • es6-启用除模块以外的所有ECMAScript 6功能(这会自动将ecmaVersion解析器选项设置为6)。
  • es2017-添加所有ECMAScript 2017全局变量并自动将ecmaVersion解析器选项设置为8。
  • es2020-添加所有ECMAScript 2020全局变量并自动将ecmaVersion解析器选项设置为11。
  • es2021-添加所有ECMAScript 2021全局变量并将ecmaVersion解析器选项自动设置为12。
  • worker -web workers 的全局变量。
  • amd-根据amd规范定义require()define()作为全局变量。
  • mocha -添加所有Mocha测试全局变量。
  • jasmine -添加了版本1.3和2.0的所有Jasmine测试全局变量。
  • jest -Jest全局变量。
  • phantomjs -PhantomJS全局变量。
  • protractor -Protractor全局变量。
  • qunit -QUnit全局变量。
  • jquery -jQuery全局变量。
  • prototypejs -Prototype.js全局变量。
  • shelljs -ShellJS全局变量。
  • meteor -Meteor全局变量。
  • mongo -MongoDB全局变量。
  • applescript -AppleScript全局变量。
  • nashorn -Java 8 Nashorn全局变量。
  • serviceworker -Service Worker全局变量。
  • atomtest -Atom test helper全局变量。
  • embertest -Ember test helper全局变量。
  • webextensions -WebExtensions全局变量。
  • greasemonkey -GreaseMonkey全球。

这些环境不是互斥的,因此您一次可以定义多个环境。
可以在文件内部,配置文件中或使用--env 命令行标志指定环境。

使用配置注释

要使用JavaScript文件内的注释指定环境,请使用以下格式:

  1. /* eslint-env node, mocha */

这将启用Node.js和Mocha环境。

使用配置文件

要在配置文件中指定环境,请使用env键并通过将每个设置为来指定要启用的环境true。例如,以下启用浏览器和Node.js环境:

  1. {
  2. "env": {
  3. "browser": true,
  4. "node": true
  5. }
  6. }

或在package.json文件中

  1. {
  2. "name": "mypackage",
  3. "version": "0.0.1",
  4. "eslintConfig": {
  5. "env": {
  6. "browser": true,
  7. "node": true
  8. }
  9. }
  10. }

在YAML中:

  1. ---
  2. env:
  3. browser: true
  4. node: true

使用插件

如果要使用插件的环境,请确保在plugins数组中指定插件名称,然后使用无前缀的插件名称,后跟斜杠和环境名称。例如:

  1. {
  2. "plugins": ["example"],
  3. "env": {
  4. "example/custom": true
  5. }
  6. }

或在package.json文件中

  1. {
  2. "name": "mypackage",
  3. "version": "0.0.1",
  4. "eslintConfig": {
  5. "plugins": ["example"],
  6. "env": {
  7. "example/custom": true
  8. }
  9. }
  10. }

指定全局

ESLint的某些核心规则依赖于运行时可用于代码的全局变量的知识。由于这些变量在不同的环境之间可能会有很大差异,并且在运行时会被修改,因此ESLint不对执行环境中存在哪些全局变量进行任何假设。如果要使用要求了解哪些全局变量可用的规则,则可以在配置文件中定义全局变量,也可以在源代码中使用配置注释。

使用配置注释

要使用JavaScript文件中的注释指定全局变量,请使用以下格式:

  1. /* global var1, var2 */

这定义了两个全局变量var1var2。如果您希望有选择地指定可以写入这些全局变量(而不是仅读取它们),那么可以为每个变量设置一个"writable"标志:

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

使用配置文件

要在配置文件中配置全局变量,请将globals配置属性设置为一个对象,该对象包含为要使用的每个全局变量命名的键。对于每个全局变量键,将相应的值设置为,"writable"以允许该变量被覆盖或"readonly"不允许覆盖。例如:

  1. {
  2. "globals": {
  3. "var1": "writable",
  4. "var2": "readonly"
  5. }
  6. }

在YAML中:

  1. ---
  2. globals:
  3. var1: writable
  4. var2: readonly

这些示例允许var1在您的代码中被覆盖,但不允许使用var2
可以使用字符串禁用全局变量"off"。例如,在大多数ES2015全局变量可用但Promise不可用的环境中,您可以使用以下配置:

  1. {
  2. "env": {
  3. "es6": true
  4. },
  5. "globals": {
  6. "Promise": "off"
  7. }
  8. }

由于历史原因,布尔值false和字符串值"readable"等于"readonly"。同样,布尔值true和字符串值"writeable"等效于"writable"。但是,不建议使用旧值。

指定解析器选项

ESLint允许您指定要支持的JavaScript语言选项。默认情况下,ESLint需要ECMAScript 5语法。您可以使用解析器选项覆盖该设置以启用对其他ECMAScript版本以及JSX的支持。

请注意,支持JSX语法与支持React并不相同。React将特定的语义应用于ESLint无法识别的JSX语法。如果您使用React并需要React语义,我们建议使用eslint-plugin-react

同样,支持ES6语法与支持新的ES6全局变量(例如,诸如的新类型Set)并不相同。对于ES6语法,请使用{ "parserOptions": { "ecmaVersion": 6 } }; 对于新的ES6全局变量,请使用{ "env": { "es6": true } }{ "env": { "es6": true } }自动启用ES6语法,但{ "parserOptions": { "ecmaVersion": 6 } }不自动启用ES6全局变量。

解析器选项是.eslintrc.*使用parserOptions属性在文件中设置的。可用的选项有:

  • ecmaVersion-设置为3、5(默认),6、7、8、9、10、11或12,以指定要使用的ECMAScript语法的版本。您还可以设置为2015(等于6),2016(等于7),2017(等于8),2018(等于9),2019(等于10),2020(等于11)或2021(与12相同)使用基于年份的命名。
  • sourceType-设置为"script"(默认),或者"module"代码在ECMAScript模块中。
  • ecmaFeatures-一个对象,指示您要使用哪些其他语言功能:
    • globalReturn-允许return在全球范围内发表声明
    • impliedStrict-启用全局严格模式(如果ecmaVersion大于等于5)
    • jsx-启用JSX

这是一个示例.eslintrc.json文件:

  1. {
  2. "parserOptions": {
  3. "ecmaVersion": 6,
  4. "sourceType": "module",
  5. "ecmaFeatures": {
  6. "jsx": true
  7. }
  8. },
  9. "rules": {
  10. "semi": "error"
  11. }
  12. }

设置解析器选项有助于ESLint确定什么是解析错误。false默认情况下,所有语言选项都是。

Rules

配置规则

ESLint带有大量内置规则,您可以通过插件添加更多规则。您可以使用配置注释或配置文件来修改项目使用的规则。要更改规则设置,必须将规则ID设置为以下值之一:

  • "off"0-关闭规则
  • "warn"1-将规则作为警告打开(不影响退出代码)
  • "error"2-将规则作为错误打开(触发时退出代码为1)

使用配置注释

要使用配置注释在文件内部配置规则,请使用以下格式的注释:

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

在此示例中,eqeqeq被关闭,并且curly由于错误而被打开。您也可以使用等效的数字表示规则的严重性:

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

此示例与上一个示例相同,只不过它使用数字代码而不是字符串值。该eqeqeq规则已关闭,并且该curly规则设置为错误。

如果规则具有其他选项,则可以使用数组文字语法来指定它们,例如:

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

此注释指定quotes规则的“双精度”选项。数组中的第一项始终是规则严重性(数字或字符串)。
配置注释可以包括说明,以解释为什么需要注释。该描述必须在配置之后进行,并由两个或多个连续-字符与配置分开。例如:

  1. /* eslint eqeqeq: "off", curly: "error" -- Here's a description about why this configuration is necessary. */
  1. /* eslint eqeqeq: "off", curly: "error"
  2. --------
  3. Here's a description about why this configuration is necessary. */
  1. /* eslint eqeqeq: "off", curly: "error"
  2. * --------
  3. * This will not work due to the line above starting with a '*' character.
  4. */

使用配置文件

要在配置文件中配置规则,请使用rules密钥以及错误级别和要使用的任何选项。例如:

  1. {
  2. "rules": {
  3. "eqeqeq": "off",
  4. "curly": "error",
  5. "quotes": ["error", "double"]
  6. }
  7. }

在YAML中:

  1. ---
  2. rules:
  3. eqeqeq: off
  4. curly: error
  5. quotes:
  6. - error
  7. - double

要配置在插件中定义的规则,您必须在规则ID前面加上插件名称和/。例如:

  1. {
  2. "plugins": [
  3. "plugin1"
  4. ],
  5. "rules": {
  6. "eqeqeq": "off",
  7. "curly": "error",
  8. "quotes": ["error", "double"],
  9. "plugin1/rule1": "error"
  10. }
  11. }

在YAML中:

  1. ---
  2. plugins:
  3. - plugin1
  4. rules:
  5. eqeqeq: 0
  6. curly: error
  7. quotes:
  8. - error
  9. - "double"
  10. plugin1/rule1: error

在这些配置文件中,规则plugin1/rule1来自名为plugin1的插件。您还可以将此格式与配置注释一起使用,例如:

  1. /* eslint "plugin1/rule1": "error" */


注意:**从插件指定规则时,请确保省略eslint-plugin-。ESLint在内部仅使用非前缀名称来查找规则。

禁用规则

使用配置注释

要临时禁用文件中的规则警告,请使用以下格式的块注释:

  1. /* eslint-disable */
  2. alert('foo');
  3. /* eslint-enable */

您还可以禁用或启用特定规则的警告:

  1. /* eslint-disable no-alert, no-console */
  2. alert('foo');
  3. console.log('bar');
  4. /* eslint-enable no-alert, no-console */

要在整个文件中禁用规则警告,请在文件/* eslint-disable */顶部放置一个块注释:

  1. /* eslint-disable */
  2. alert('foo');

您还可以禁用或启用整个文件的特定规则:

  1. /* eslint-disable no-alert */
  2. alert('foo');

要禁用特定行上的所有规则,请使用以下格式之一的行或块注释:

  1. alert('foo'); // eslint-disable-line
  2. // eslint-disable-next-line
  3. alert('foo');
  4. /* eslint-disable-next-line */
  5. alert('foo');
  6. alert('foo'); /* eslint-disable-line */

要在特定行上禁用特定规则:

  1. alert('foo'); // eslint-disable-line no-alert
  2. // eslint-disable-next-line no-alert
  3. alert('foo');
  4. alert('foo'); /* eslint-disable-line no-alert */
  5. /* eslint-disable-next-line no-alert */
  6. alert('foo');

要在特定行上禁用多个规则:

  1. alert('foo'); // eslint-disable-line no-alert, quotes, semi
  2. // eslint-disable-next-line no-alert, quotes, semi
  3. alert('foo');
  4. alert('foo'); /* eslint-disable-line no-alert, quotes, semi */
  5. /* eslint-disable-next-line no-alert, quotes, semi */
  6. alert('foo');

以上所有方法也适用于插件规则。例如,要禁用eslint-plugin-examplerule-name规则,请将插件的名称(example)和规则的名称(rule-name)合并为example/rule-name

  1. foo(); // eslint-disable-line example/rule-name
  2. foo(); /* eslint-disable-line example/rule-name */

配置注释可以包括说明,以解释为什么需要注释。该描述必须在配置之后,并且需要通过两个或多个连续-字符与配置分开。例如:

  1. // eslint-disable-next-line no-console -- Here's a description about why this configuration is necessary.
  2. console.log('hello');


注意:**禁用文件部分警告的注释告诉ESLint不要报告禁用代码的规则违例。ESLint仍会解析整个文件,因此,禁用的代码仍然需要在语法上是有效的JavaScript。

使用配置文件

要为一组文件禁用配置文件中的规则,请同时使用overrides键和files键。例如:

  1. {
  2. "rules": {...},
  3. "overrides": [
  4. {
  5. "files": ["*-test.js","*.spec.js"],
  6. "rules": {
  7. "no-unused-expressions": "off"
  8. }
  9. }
  10. ]
  11. }

禁用内联评论

要禁用所有内联配置注释,请使用该noInlineConfig设置。例如:

  1. {
  2. "rules": {...},
  3. "noInlineConfig": true
  4. }

此设置类似于—no-inline-config CLI选项。

报告未使用的eslint-disable评论

要报告未使用的eslint-disable评论,请使用reportUnusedDisableDirectives设置。例如:

  1. {
  2. "rules": {...},
  3. "reportUnusedDisableDirectives": true
  4. }

此设置类似于—report-unused-disable-directives CLI选项,但不会失败(报告为"warn"严重性)。

Pugins

指定解析器

默认情况下,ESLint使用Espree作为其解析器。您可以选择指定在配置文件中使用其他解析器,只要该解析器满足以下要求:

  1. 它必须是可从使用解析器的配置文件中加载的Node模块。通常,这意味着您应该使用npm单独安装解析器软件包。
  2. 它必须符合解析器接口

请注意,即使有这些兼容性,也不能保证外部解析器可以与ESLint正常工作,并且ESLint不能修复与其他解析器不兼容相关的错误。

要指示要用作解析器的npm模块,请使用.eslintrc文件中的parser选项进行指定。例如,以下指定使用Esprima代替Espree:

  1. {
  2. "parser": "esprima",
  3. "rules": {
  4. "semi": "error"
  5. }
  6. }

以下解析器与ESLint兼容:

请注意,使用自定义解析器时,parserOptions默认情况下,ESLint仍需要配置属性才能使ESLint正常使用ECMAScript 5中未提供的功能。解析器全部通过parserOptions,可能会也可能不会使用它们来确定要启用的功能。

指定处理器

插件可以提供处理器。处理器可以从其他类型的文件中提取JavaScript代码,然后让ESLint查看该JavaScript代码,或者处理器可以出于某种目的在预处理中转换JavaScript代码。

要在配置文件中指定处理器,请将该processor键与插件名称和处理器名称(以斜杠表示)的串联字符串一起使用。例如,以下启用a-processor了插件a-plugin提供的处理器:

  1. {
  2. "plugins": ["a-plugin"],
  3. "processor": "a-plugin/a-processor"
  4. }

要为特定类型的文件指定处理器,请使用overrides键和processor键的组合。例如,以下使用处理器a-plugin/markdown来处理*.md文件。

  1. {
  2. "plugins": ["a-plugin"],
  3. "overrides": [
  4. {
  5. "files": ["*.md"],
  6. "processor": "a-plugin/markdown"
  7. }
  8. ]
  9. }

处理器可以制作诸如0.js和的命名代码块1.js。ESLint将这样的命名代码块作为原始文件的子文件来处理。您可以overrides在配置部分中为命名代码块指定其他配置。例如,以下内容严格禁用以markdown文件结尾的命名代码块的规则.js

  1. {
  2. "plugins": ["a-plugin"],
  3. "overrides": [
  4. {
  5. "files": ["*.md"],
  6. "processor": "a-plugin/markdown"
  7. },
  8. {
  9. "files": ["**/*.md/*.js"],
  10. "rules": {
  11. "strict": "off"
  12. }
  13. }
  14. ]
  15. }

ESLint检查命名代码块的文件路径,然后在任何overrides条目与文件路径不匹配的情况下将其忽略。overrides如果您要抹除以外的命名代码块,请确保添加一个条目*.js

配置插件

ESLint支持使用第三方插件。在使用插件之前,您必须使用npm进行安装。
要在配置文件中配置插件,请使用plugins键,其中包含插件名称列表。该eslint-plugin-前缀可以从插件名称被省略。

  1. {
  2. "plugins": [
  3. "plugin1",
  4. "eslint-plugin-plugin2"
  5. ]
  6. }

在YAML中:

  1. ---
  2. plugins:
  3. - plugin1
  4. - eslint-plugin-plugin2


笔记:**

  1. 相对于配置文件解析插件。换句话说,ESLint将加载插件,就像用户通过require('eslint-plugin-pluginname')在配置文件中运行所获得的那样。
  2. 基本配置中的插件(通过extends设置加载)相对于派生的配置文件。例如,如果./.eslintrc具有extends: ["foo"]eslint-config-foo具有plugins: ["bar"],则ESLinteslint-plugin-bar./node_modules/(而不是./node_modules/eslint-config-foo/node_modules/)或祖先目录中查找。因此,配置文件和基本配置中的每个插件都会唯一地解析。

命名约定

包括一个插件

eslint-plugin-对于无作用域的程序包,可以省略该前缀

  1. {
  2. // ...
  3. "plugins": [
  4. "jquery", // means eslint-plugin-jquery
  5. ]
  6. // ...
  7. }

相同的规则适用于作用域包:

  1. {
  2. // ...
  3. "plugins": [
  4. "@jquery/jquery", // means @jquery/eslint-plugin-jquery
  5. "@foobar" // means @foobar/eslint-plugin
  6. ]
  7. // ...
  8. }

使用插件

使用插件定义的规则,环境或配置时,必须遵循以下约定进行引用:

  • eslint-plugin-foofoo/a-rule
  • @foo/eslint-plugin@foo/a-config
  • @foo/eslint-plugin-bar@foo/bar/a-environment

例如:

  1. {
  2. // ...
  3. "plugins": [
  4. "jquery", // eslint-plugin-jquery
  5. "@foo/foo", // @foo/eslint-plugin-foo
  6. "@bar" // @bar/eslint-plugin
  7. ],
  8. "extends": [
  9. "plugin:@foo/foo/recommended",
  10. "plugin:@bar/recommended"
  11. ],
  12. "rules": {
  13. "jquery/a-rule": "error",
  14. "@foo/foo/some-rule": "error",
  15. "@bar/another-rule": "error"
  16. },
  17. "env": {
  18. "jquery/jquery": true,
  19. "@foo/foo/env-foo": true,
  20. "@bar/env-bar": true,
  21. }
  22. // ...
  23. }

Ignoring Code

ignorePatterns 在配置文件中

您可以告诉ESLintignorePatterns在配置文件中使用忽略特定的文件和目录。ignorePatterns模式遵循与相同的规则.eslintignore。请参阅.eslintignore文件资料,以了解更多信息。

  1. {
  2. "ignorePatterns": ["temp.js", "**/vendor/*.js"],
  3. "rules": {
  4. //...
  5. }
  6. }
  • 全局模式ignorePatterns相对于配置文件所在的目录。
  • 您不能ignorePatternsoverridesproperty下写入property。
  • 中定义的模式.eslintignore优先于ignorePatterns配置文件的属性。

如果全局模式以开头/,则该模式相对于配置文件的基本目录。例如,/foo.jslib/.eslintrc.json对比赛lib/foo.js,但没有lib/subdir/foo.js

如果通过--configCLI选项提供了配置,则以/config开头的忽略模式是相对于当前工作目录的,而不是相对于给定配置的基本目录的。例如,如果--config configs/.eslintrc.json存在,则配置中的忽略模式是相对于.而不是./configs

.eslintignore文件

您可以通过.eslintignore在项目的根目录中创建文件来告诉ESLint忽略特定的文件和目录。该.eslintignore文件是纯文本文件,其中每行是一个glob模式,指示在掉毛时应省略哪些路径。例如,以下内容将忽略所有JavaScript文件:

  1. **/*.js

当运行ESLint时,它将在确定工作.eslintignore文件之前先在当前工作目录中查找文件。如果找到此文件,则遍历目录时将应用这些首选项。一次只能使用一个.eslintignore文件,因此.eslintignore将不使用当前工作目录中一个文件以外的文件。
globs使用node-ignore进行匹配,因此可以使用许多功能:

  • 以开头的行#被视为注释,不会影响忽略模式。
  • 路径是相对于当前工作目录的。通过--ignore-pattern 命令传递的路径也是如此。
  • 开头的行!是取反的模式,这些模式重新包含了先前模式忽略的模式。
  • 忽略模式的行为符合.gitignore 规范

特别要注意的是,像.gitignore文件一样,所有路径都用作两者的模式,.eslintignore并且--ignore-pattern必须使用正斜杠作为其路径分隔符。

  1. # Valid
  2. /root/src/*.js
  3. # Invalid
  4. \root\src\*.js

.gitignore有关有效语法的更多示例,请参见的规范。
除了.eslintignore文件中的任何模式之外,ESLint始终遵循一些隐式的忽略规则,即使--no-ignore已传递标志。隐式规则如下:

  • node_modules/ 被忽略。
  • 点文件(除外.eslintrc.*)以及点文件夹及其内容将被忽略。

这些规则也有一些例外:

  • 如果lint的路径是全局模式或目录路径,并且包含点文件夹,则所有点文件和点文件夹都将被删除。这包括深埋在目录结构中的点文件和点文件夹。
    例如,eslint .config/将对目录中的所有点文件夹和点文件进行.config抹除,包括直接子级以及目录结构中更深的子级。
  • 如果lint的路径是特定的文件路径,并且--no-ignore已经传递了该标志,则ESLint将对文件进行处理,而不考虑隐式的忽略规则。
    例如,eslint .config/my-config-file.js --no-ignore将导致my-config-file.js掉毛。应该注意的是,没有该--no-ignore行的同一命令不会使my-config-file.js文件掉毛。
  • 通过--ignore-pattern或指定的允许列表和拒绝列表规则.eslintignore在隐式忽略规则之上被优先处理。
    例如,在这种情况下,.build/test.js是允许列表所需的文件。由于默认情况下会忽略所有点文件夹及其子项,因此.build必须首先将其列出,以便eslint知道其子项。然后,.build/test.js必须显式地允许列表,而其余内容则被拒绝列表。这是通过以下.eslintignore文件完成的:

    1. # Allowlist 'test.js' in the '.build' folder
    2. # But do not allow anything else in the '.build' folder to be linted
    3. !.build
    4. .build/*
    5. !.build/test.js
  • 以下--ignore-pattern内容也是等效的:

    1. eslint --ignore-pattern '!.build' --ignore-pattern '.build/*' --ignore-pattern '!.build/test.js' parent-folder/

    使用备用文件

    如果您希望使用.eslintignore与当前工作目录中的文件不同的文件,则可以使用--ignore-path选项在命令行中指定该文件。例如,您可以使用.jshintignore文件,因为它具有相同的格式:

  1. eslint --ignore-path .jshintignore file.js

您还可以使用您的.gitignore文件:

  1. eslint --ignore-path .gitignore file.js

可以使用遵循标准忽略文件格式的任何文件。请记住,指定--ignore-path意味着.eslintignore将不使用任何现有文件。请注意,中的通配规则.eslintignore遵循的规则.gitignore

在package.json中使用eslintIgnore

如果.eslintignore未找到文件且未指定备用文件,则ESLint将在package.json中查找eslintIgnore密钥以检查是否忽略文件。

  1. {
  2. "name": "mypackage",
  3. "version": "0.0.1",
  4. "eslintConfig": {
  5. "env": {
  6. "browser": true,
  7. "node": true
  8. }
  9. },
  10. "eslintIgnore": ["hello.js", "world.js"]
  11. }

忽略的文件警告

当您将目录传递给ESLint时,文件和目录将被静默忽略。如果将特定文件传递给ESLint,则将看到警告,指示该文件已被跳过。例如,假设您有一个如下所示的.eslintignore文件:

  1. foo.js

然后运行:

  1. eslint foo.js

您会看到以下警告:

  1. foo.js
  2. 0:0 warning File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
  3. 1 problem (0 errors, 1 warning)

出现此消息的原因是,ESLint无法确定您是否希望实际对文件进行处理。如消息所示,您可以使用--no-ignore忽略规则来忽略。

考虑另一种情况,您可能想在特定的点文件或点文件夹上运行ESLint,但忘记了专门允许这些文件进入您的.eslintignore文件。您将运行以下内容:

  1. eslint .config/foo.js

您会看到以下警告:

  1. .config/foo.js
  2. 0:0 warning File ignored by default. Use a negated ignore pattern (like "--ignore-pattern '!<relative/path/to/filename>'") to override
  3. 1 problem (0 errors, 1 warning)

出现此消息的原因是,通常,ESLint的隐式忽略规则将忽略该文件(如上所述)。文件中的否定忽略规则.eslintignore将覆盖隐式规则,并重新包含此文件以进行掉毛。此外,在这种特定情况下,--no-ignore也可以使用它来整理文件。

参考

[1] ESLint 官网
[2] 代码规范之-理解ESLint、Prettier、EditorConfig