Configuration Files

Configuration File Formats

指定配置文件使用顺序：

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

6. package.json

   Using Configuration Files

7. 配置文件root属性：如果不为true,则eslint 会不限于此文件的规则并逐级向上查找配置文件，直到顶级目录。

8. 注释和js注释一致

   Adding Shared Settings

   settings 字段 暂时不解

   Cascading and Hierarchy

   级联和层次结构

主要结合root字段以及多个配置文件规则优先顺序

Extending Configuration Files

扩展配置文件

extends 字段

// .eslintrc.js
export default {
  // extends 有以下两种写法 字符串和数组
    // "extends": "eslint:recommended",
      "extends": ["airbnb"]
  // airbnb 是eslint-config-airbnb的简写，可以省略前缀eslint-config-
};

plugins 字段

// .eslintrc.js
export default {
    "plugins": [
        "react"
      // react 是eslint-plugin-react的缩写，可以省略前缀eslint-plugin-
    ],
  //     继承也可以继承插件的规则 react/recommended 为eslint-plugin-recommended的缩写
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "rules": {
       "react/no-set-state": "off"
    }
}

Configuration Based on Glob Patterns

基于全局模式的配置

overrides 字段
当同一目录但是不同文件夹下的规则不同时可使用此规则

{
  "rules": {
    "quotes": ["error", "double"]
  },
  "overrides": [
    {
      "files": ["bin/*.js", "lib/*.js"],
      "excludedFiles": "*.test.js",
      "rules": {
        "quotes": ["error", "single"]
      }
    }
  ]
}

Personal Configuration Files

已废弃

Language Options

Specifying Environments

指定环境

env

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    }
};

Specifying Globals

指定全局变量

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

Specifying Parser Options

指定解析器

{
    "parserOptions": {
             // set to 3, 5 (default), 6, 7, 8, 9, 10, 11, 12, or 13 to specify the version of ECMAScript syntax you want to use. You can also set to 2015 (same as 6), 2016 (same as 7), 2017 (same as 8), 2018 (same as 9), 2019 (same as 10), 2020 (same as 11), 2021 (same as 12), or 2022 (same as 13) to use the year-based naming. You can also set "latest" to use the most recently supported version
        "ecmaVersion": "latest", // 默认es5
          // sourceType - set to "script" (default) or "module" if your code is in ECMAScript modules.
        "sourceType": "module", // 默认script 如果是es6的语法则用module
        "ecmaFeatures": { // 附加的语言功能 见下方英文注释
            "jsx": true
        }
    },
}
// ecmaFeatures - an object indicating which additional language features you'd like to use:
// globalReturn - allow return statements in the global scope
// impliedStrict - enable global strict mode (if ecmaVersion is 5 or greater)
// jsx - enable JSX

Rules

Configuring Rules

• “off”/0 关闭规则
• “warn”/1
• “error”/2

  Using configuration comments

  通过文件头部的注释指定规则

/*eslint quotes: ["error", "double"]*/
// 意思是字符串必须是双引号"double", 如果不是 则是error的错误
const a = "122"; // ✔️

Using configuration files

通过配置文件指定规则

{
    "rules": {
        "quotes": ["error", "double"],
          // "quotes": 2 
          // 如果只有一个数字则说明是用了默认规则
          // quotes 的默认规则就是double，则如果不是double则就是2 error
          "plugin1/rule1": "error" // 等同于eslint-plugin-plugin1/rule1
    }
}

Disabling Rules

Using configuration comments

/* eslint-disable */
/* eslint-disable no-alert */
// eslint-disable-line  or /* eslint-disable-line */
// eslint-disable-next-line or /* eslint-disable-next-line */
alert('foo'); // eslint-disable-line no-alert  具体规则

Using configuration files

指定文件的规则

{
  "rules": {...},
  "overrides": [
    {
      "files": ["*-test.js","*.spec.js"],
      "rules": {
        "no-unused-expressions": "off"
      }
    }
  ]
}

Disabling Inline Comments

不允许行内注释

{
  "rules": {...},
  "noInlineConfig": true
}

不允许文件头部注释

{
  "rules": {...},
  "reportUnusedDisableDirectives": true
}

Plugins

Specifying Parser

eslint默认使用Espree作为它的解析器，如果使用第三方parser确保其是能正常兼容的。以下是可兼容的三个parser

• Esprima
• @babel/eslint-parser - A wrapper around the Babel parser that makes it compatible with ESLint.
• @typescript-eslint/parser - A parser that converts TypeScript into an ESTree-compatible form so it can be used in ESLint.

  注意在使用第三方parser配置的前提下，仍需要配置parserOptions，以确保可以兼容ecmaVersion的属性默认值es5

Specifying Processor

{
    "plugins": ["a-plugin"],
    "processor": "a-plugin/a-processor"
}
{
    "plugins": ["a-plugin"],
    "overrides": [
        {
            "files": ["*.md"],
            "processor": "a-plugin/markdown"
        }
    ]
}
{
    "plugins": ["a-plugin"],
    "overrides": [
        {
            "files": ["*.md"],
            "processor": "a-plugin/markdown"
        },
        {
            "files": ["**/*.md/*.js"],
            "rules": {
                "strict": "off"
            }
        }
    ]
}

Configuring Plugins

{
    "plugins": [
        "plugin1",
        "eslint-plugin-plugin2"
    ]
}

{
    // ...
    "plugins": [
        "jquery", // means eslint-plugin-jquery
    ]
    // ...
}

{
    // ...
    "plugins": [
        "@jquery/jquery", // means @jquery/eslint-plugin-jquery
        "@foobar" // means @foobar/eslint-plugin
    ]
    // ...
}

{
    // ...
    "plugins": [
        "jquery",   // eslint-plugin-jquery
        "@foo/foo", // @foo/eslint-plugin-foo
        "@bar"      // @bar/eslint-plugin
    ],
    "extends": [
        "plugin:@foo/foo/recommended",
        "plugin:@bar/recommended"
    ],
    "rules": {
        "jquery/a-rule": "error",
        "@foo/foo/some-rule": "error",
        "@bar/another-rule": "error"
    },
    "env": {
        "jquery/jquery": true,
        "@foo/foo/env-foo": true,
        "@bar/env-bar": true,
    }
    // ...
}

Ignoring Code

ignorePatternsin Config Files

ignorePatterns 的配置

{
    "ignorePatterns": ["temp.js", "**/vendor/*.js"],
    "rules": {
        //...
    }
}

The.eslintignoreFile

符合node-ignore

• 通过#注释
• 路径相对于当前目录
• Lines preceded by ! are negated patterns that re-include a pattern that was ignored by an earlier pattern.
• Ignore patterns behave according to the .gitignore specification.

一些隐含的规则

• node_modules/被忽略
• .开头的文件或者文件夹被忽略

  Using an Alternate File

  使用备用文件

Using eslintIgnore in package.json

Ignored File Warnings