ESLint

Lint 是检验代码格式工具的一个统称，具体的工具有 Jslint 、 Eslint 等等。Lint 应该做两件事情：

1. 提供编码规范。
2. 提供自动检验代码的程序，并打印检验结果：告诉哪一个文件哪一行代码不符合哪一条编码规范，方便去修改代码。

ESLint 是一个静态代码分析工具，在没有任何程序执行的情况下，对代码进行分析。ESLint 可以帮助在项目中建立统一的团队代码规范，保值正确、统一的代码风格，提高代码的可读性、可维护性。

使用 ESLint：

1. 安装 ESLint：npm install eslint -D。
2. 使用 ESLint 进行校验必须要有 ESLint 的配置文件，ESLint 才能知道要使用怎样的规则来进行校验，因此运行 npx eslint --init 生成 .eslintrc.js 配置文件。

   ESLint 的配置信息很多，手动创建 ESLint 配置文件并进行配置比较麻烦，可以使用 ESLint 提供的命令来自动生成。

3. 新建 index.js 文件并编码代码。

   var title = "Hello World";
   

4. 运行 npx eslint ./index.js 命令，ESLint 将会自动校验 index.js 文件，并且将报错信息会打印在终端中。
   

ESLint 校验的原理：

ESLint 默认会通过 espre 这个解析器对要校验的代码进行词法分析和语法分析，生成 AST 抽象语法树；然后对这个 AST 抽象语法树进行检测；如果有问题的话，ESLint 就进行相关的错误提示。

Eslint 配置：

.eslintrc.js 配置文件导出一个对象。

// .eslintrc.js 
module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
}

env：

env：指定环境，将会提供指定环境预定义的全局变量。通过将每个环境设置为 true 来指定要启用的环境，这些环境不是相互排斥的，因此可以一次定义多个环境。

env 的属性值很多，常用的属性值有：

1. browser：将会提供浏览器的全局变量。
2. node：将会提供 Node.js 的全局变量和 Node.js 的作用域。
3. shared-node-browser：将会提供 Node.js 和浏览器通用的全局变量。
4. commonjs：将会提供 CommonJS 的全局变量和 CommonJS 的范围。
5. jquery：将会提供 jQuery 的全局变量。
6. es6：启用除模块之外的所有 ECMAScript 6 功能，并且会自动将 ecmaVersion 解析器选项设置为 6。
7. es2016 ：添加所有 ECMAScript 2016 全局变量，并自动将 ecmaVersion 解析器选项设置为 7。
8. es2017、es2018…

extends：

extends：指定继承其他规则的配置信息。

常用的属性值：

1. eslint:recommended：属会启用一系列核心规则，这些规则是经过前人验证的最佳实践。

parserOptions：

parserOptions：指定要支持的 JavaScript 语言选项。 默认情况下支持 ECMAScript 5 语法。

常用的选项有：

1. ecmaVersion ：可以设置为 3、5（默认）、6… 等指定要使用的 ECMAScript 语法版本；也可以设置为 2015 年（同 6）、2016 年（同 7）…等基于年份命名的 ECMAScript 语法版本；还可以设置 latest 指定支持最新的 ECMAScript 语法版本。
2. sourceType：指定是否支持 ESModule。
3. ecmaFeatures：指定要使用的附加的语言功能。是一个对象，属性值有：
   • jsx：允许使用 JSX 语法。
   • impliedStrict ：启用全局 严格模式。
   • globalReturn：在全局作用域内允许 return 语句。
4. allowReserved：是否允许使用保留字作为标识符。

plugins：

plugins：指定要使用的插件。

rules：

rules：指定校验的规则。修改规则应遵循如下要求：

1. off 或 0：关闭规则。
2. warn 或 1：开启规则。使用警告级别的错误，不会导致程序退出。
3. error 或 2：开启规则。使用错误级别的错误，当被触发的时候，程序会退出。

有的规则没有属性，只需控制是开启还是关闭，使用起来像这样："eqeqeq": "off"；有的规则有自己的属性，使用起来像这样："quotes": ["error", "double"]。

常用规则：

1. "object-shorthand": ["error", "always"]：对象属性要简写。
2. quotes: [2, 'single'] ：使用单引号包裹。
3. semi: [2, 'never'] ：一行结尾不写分号。
4. 'comma-dangle': [2, 'always-multiline'] ：对象或数组多行写法时，最后一个值末尾加逗号。
5. indent: ['error', 2] ：换行缩进两格。
6. "no-var": ['error']：不允许使用 var 声明。
7. "linebreak-style": ['error', 'unix']：以 unix 格式换行。
8. "no-console": 2：禁用 console。
9. "no-debugger": 2：禁用 debugger。
10. "spaced-comment": [2, 'always']：在注释中使用一致的空格。
11. "space-before-function-paren": [2, 'always']： 定义函数时小括号前面要有空格。
12. "space-before-blocks": [2, 'always']：不以新行开始的块（大括号）前面要有空格。
13. "no-multi-spaces": 2：禁止有多余的空格。
14. ”no-multiple-empty-lines": [1, { max: 1 }]：空行最多不能超过 1 行。
15. "key-spacing": ["error", { "beforeColon": false, "afterColon": true }]：在对象字面量属性中，键和冒号之间没有空格，值和冒号之间至少有一个空格。
16. "arrow-parens": ['error', 'as-needed']：箭头函数单个参数不带括号。

设置 fix 参数：

在 ESLint 命令后面跟上 --fix 参数，ESLint 将会自动修复基础错误。

全局变量配置：

例如：使用 window 对象，默认情况下会报 no-undef 的错误，需要在 .eslintrc.js 中进行 globals 配置。

"globals": {
      "window": true
}

某些行跳过 lint 校验：

使用行内注释跳过对某一行的 ESLint 校验，只影响这一行，不影响外部。

const apple = "apple";  // eslint-disable-line

多行跳过检查。

/* eslint-disable */
const apple = "apple";  
const banana = "banana";  
/* eslint-enable */