eslint

目录

• eslint
  • eslint配置的方式
  • 配置
    • 环境
    • globals全局变量配置
    • parserOptions 配置解析器选项
    • parser配置解析器
    • ignore Files
    • overrides 给特定的文件覆盖基本配置
    • noInlineConfig 是否禁用内联的注释配置
    • reportUnusedDisableDirectives 报告未使用的eslint-disable注释，错误级别为：warn
    • eslint-disable/eslint-enable为文件部分启用禁用规则
    • eslint-disable-next-line/esline-disable-line
    • rules配置
    • extends

eslint

eslint配置的方式

1. 通过代码注释

   /* eslint quotes: ["warn", "single"],no-unused-vars: "off"*/
   

2. 通过配置文件
   • .eslintrc.*(*包含json、js/cjs、yaml/yml)
   • package.json文件的eslintConfig配置
     eslint会自动匹配这些配置文件。

一个项目中有多个配置文件，这些文件的优先级为：

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

配置

环境

env - object 运行时的环境，配置的环境，可以使用对应环境的全局变量；

内置的全局变量为：环境变量配置

1. 注释配置

   /*eslint-env node, mocha*/
   

2. 配置文件配置
   .eslintrc.js

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

3. package.json中配置

   {
       "name": "mypackage",
       "version": "0.0.1",
       "eslintConfig": {
           "env": {
               "browser": true,
               "node": true
           }
       }
   }
   

4. yaml文件中配置
   .eslintrc.yaml

   ---
     env:
       browser: true
       node: true
   

globals全局变量配置

全局变量
配置全局变量的方式：

1. 注释

/*global var1, var2*/

这定义的全局变量是只读的

/*global var1:witable, var2:witable*/

这定义的全局变量是可读写的

2. 配置文件

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

parserOptions 配置解析器选项

{
  "parserOptions": {
    "ecmaVersion": "latest", // 使用的js版本
    "sourceType": "script", //script或module
    "ecmaFeature": {
     "jsx": true, // 启用jsx
    } // 其他语言的特性 
  }
}

parser配置解析器

你可以使用自定义的js解析器，将js转化为抽象语法树（AST），供Eslint进行评估。如果你的代码与默认的Espree不兼容，需要自己配置解析器

{
  parser: "esprima",
  rules: {
    "semi": "error"
  }
}

以下解析器与 ESLint 兼容:

• esprima
• @babel/eslint-parser 围绕 Babel 解析器的包装器，使其与 ESLint 兼容。
• @typescript-eslint/parser 一个解析器，它将 TypeScript 转换为与 ESTree 兼容的形式，以便可以在 ESLint 中使用。

请注意，在使用自定义解析器时，ESLint 仍然需要 parserOptions 配置属性才能在默认情况下与不在 ECMAScript 5 中的功能正常工作。解析器都传递 parserOptions ，可能会也可能不会使用它们来确定要启用的功能。

ignore Files

忽略检查的文件，方式有：

1. 将ignorePatterns添加到配置文件
2. 使用专门的文件.eslintignore文件进行配置
   .eslintrc.json

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

.eslintignore文件

**/main.js

.eslintignore 中定义的模式优先于配置文件的 ignorePatterns 属性。

overrides 给特定的文件覆盖基本配置

{
  "overrides": [
    "files": ['*.spec.js'],
    "rules": {
      "eqeqeq": 0, // 禁用`===`的配置  
      "semi": 0, //禁用代码结尾的`,`的配置
    }，
    "processor": "plugins/plugins-processor",
     // ...
  ]
}

noInlineConfig 是否禁用内联的注释配置

{
  "overrides": [
    "files": ['*.spec.js'],
    "rules": {
      "eqeqeq": 0, // 禁用`===`的配置  
      "semi": 0, //禁用代码结尾的`,`的配置
    }
  ],
  noInlineConfig: true
}

reportUnusedDisableDirectives 报告未使用的eslint-disable注释，错误级别为：warn

eslint-disable/eslint-enable为文件部分启用禁用规则

1. eslint-disable放到文件头部，为禁用整个文件的规则校验

/*eslint-disable*/
const a = 'a'
let b = "b"
if(a == b) b = a

2. eslint-diable后边跟校验规则，只禁用指定的规则

/*eslint-disable quotes -- 只禁用对引号的校验*/
const a = 'a'
let b = "b"
if(a == b) b = a

3. eslint-diable和eslint-enable，只禁用部分代码

/*eslint-disable quotes -- 只禁用对引号的校验*/
const a = 'a'
/*eslint-enable*/
let b = "b"
if(a == b) b = a

eslint-disable-next-line/esline-disable-line

只禁用一行代码的规则校验

/*eslint-disable-next-line quotes -- 下一行代码禁用引号校验*/
const a = 'a'
let b = "b" // eslint-disable-line quotes -- 本行禁用引号校验
if(a == b) b = a

rules配置

官方规则配置

extends

extends是一个eslint的方案，里边内置的有规则且不需要在rules中在进行配置