前端代码 JS 格式处理 - ESlint
ESLint是一种用于识别和报告ECMAScript/JavaScript代码中发现的模式的工具，目的是使代码更加一致并避免bug。
使用 Espree 来将 JS 转化为 AST（ abstract syntax tree，抽象语法树），进而根据规则分析词法和语法，并修复代码格式。
1、安装
# 安装
npm install eslint --save-dev
# or
yarn add eslint --dev
2、配置文件
2.1 配置类型
ESlint 的配置可以 在 package.json 中 eslintConfig 字段下 ，也可单独配置文件 .eslintrc.{js,cjs,yml,yaml,json}。
默认情况下，ESlint 会自动寻找配置文件或package.json 中的 eslintConfig 字段配置 。也可以在命令行手动指定配置文件。
也可以使用命令创建
# 创建 配置文件（项目必须有 package.json 文件）
npm init @eslint/config
# or
yarn create @eslint/config
.eslintrc.{js,cjs} 配置文件 需要 导出配置对象
module.exports = {
"rules": {}
}
命令行手动指定配置文件
eslint -c myconfig.json myfiletotest.js
2.2 多个配置文件
一般情况下，一个配置文件（放在根目录下） 或 在 package.json 中配置，就能满足要求了。但有些复杂项目，可能需要多个配置，这就有优先级的问题了。
配置文件的优先级是根据被检查的 js 文件的位置计算的。优先级高的配置会覆盖优先级低的配置。
- 优先级计算方式：
- 1、ESlint 会从被检查的 JS 文件 所在目录开始，一级一级地向上父目录中 自动寻找配置，直到根目录 或 发现有配置项“ root: true ”的配置文件时停止。
- 2、越靠近被检查的 JS 文件 的配置文件，优先级越高。所有配置都会被合并，如果配置冲突，优先级高的配置会覆盖优先级低的配置。
- 3、同一目录下，同时有 .eslintrc 配置文件 和 package.json 配置，那么.eslintrc 配置优先，package.json 中的配置则不会生效。
项目结构：
your-project
├── .eslintrc.json
├── lib
│ └── source.js
└─┬ tests
├── .eslintrc.json
└── test.js
当然，除了配置文件，还有 行内配置，和命令行配置。
行内配置： 在代码行内的配置，类似注释，但会被 ESlint 解析；
命令行配置：在 执行 eslint 命令时 指定的配置。
// 优先级: 行内配置 > 命令行配置 > 配置文件的配置
// 行内配置
/*eslint-disable*/
/*eslint-enable*/
/*global*/
/*eslint*/
/*eslint-env*/
// 命令行配置
--global
--rule
--env
-c, --config
3、配置项
ESlint 的常用配置项：
{
// 是否为根配置，默认 false
"root": true/false
// 运行环境，可配置多个。ESlint 会根据运行环境，检查代码语法
"env": {
"browser": true,
"node": true,
"es6": true,
"commonjs": true
}
// 插件是 npm 包，为 ESlint 提供很多扩展
// 插件可以执行许多功能，包括但不限于添加新规则和导出可共享配置。
// 插件可以在 "extends", "rules", "env" 等配置项中使用
// 在配置时，可以省略"eslint-plugin-" 这个包名前缀，eslint-plugin-react
"plugin": ["react"]
// 扩展配置文件（继承配置），其值可以是: 配置文件的路径、可共享配置的名称。当有多个扩展文件，该项的值是字符串数组。
// 可以认为 extends 字段后面的配置为 基础配置（父配置）,而本配置为 子配置，即 子配置继承父配置，且是多继承。
// 继承父配置文件的所有特性（包括规则、插件和语言选项）并修改所有选项。
// 共享配置是：npm 的包（package），如：eslint-config-standard
// 在配置时，可以省略"eslint-config-" 这个包名前缀
"extends": "eslint:recommended",
"extends": [
"eslint:recommended", // eslint 推荐的配置
"eslint:all"， // ESlint 当前版本所有的配置（各个版本可能会不同，不推荐使用）
"plugin:react/recommended", // 使用插件中 recommended 配置
"standard", // 共享配置
"./node_modules/coding-standard/eslintDefaults.js", // 配置文件路径，相对于本配置文件的相对路径
]
// 自定义配置，如果和 extends 中的配置项冲突，则会按一定规则覆盖
"rules": {
"react/no-set-state": "off" // 设置插件中定义的规则
....
}，
// 使用文件 全局正则 匹配 覆盖 规则配置
// 文件路径是 相对于本配置文件的相对路径
// overrides 中的规则配置 优先级高于本配置文件中的其他配置 。如果有多个 overrides ，后面的优先级更高。
// overfides 中可以配置除了 "root" 和 "ignorePatterns" 之外的所有配置项
"overrides": [
{
"files": ["bin/*.js", "lib/*.js"], // 路径匹配
"excludedFiles": "*.test.js", // 排除特定文件
"rules": {
"quotes": ["error", "single"]
}
},
...
]
}
{
"root": true,
"env": {
"browser": true,
"node": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": { "project": ["./tsconfig.json"] },
"plugins": [
"@typescript-eslint"
],
"rules": {
"@typescript-eslint/strict-boolean-expressions": [
2,
{
"allowString" : false,
"allowNumber" : false
}
]
},
"ignorePatterns": ["src/**/*.test.ts", "src/frontend/generated/*"]
}
