简介
ESLint是一个用于静态代码分析的工具，能做代码规范的检查、错误提示、代码的自动修复。
- 对代码进行静态分析和检测：
代码风格是否一致、语法错误、潜在逻辑错误 - 集成到开发环境中，例如编辑器或构建工具，以便在编码过程中提供即时反馈和建议，提高开发人员代码质量、减少潜在的错误，并遵循一致的编码风格
基本工作原理
parser：使用解析器将代码转为AST(抽象语法树)extends、plugins、rules：获取所有插件或用户定义的规则，遍历AST并执行规则- 遍历完后, 将收集到的
错误提示和修复
属性说明
root：eslint配置是否可以向父级查找，true：不能env：指定启用的环境，node：启用node环境，必须启用node环境，否则会报 ‘module’ is not definedparser：指定要使用的解析器，会把源代码转换成抽象语法树，然后再对每个节点做eslint的校验。默认解析器为espree，官方推荐的解析器中与ESLint兼容的有：- 检查 js/ts 语法：esprima（不推荐）、babel-eslint、@typescript-eslint/parser（支持ts文件解析的插件）
- 检查非 js/ts 语法：vue-eslint-parser（支持vue文件解析的插件）
parserOptions：解析器配置，常用来负责解析es语法，默认支持es5sourceType- 设置为script(默认) 或module（如果你的代码是 ECMAScript 模块)，webpack模块打包需要把sourceType设置成为moduleecmaVersion：按照 ecma 哪个版本语法做检查。例如：设置为6则支持es6语法，但不支持新的 ES6 全局变量或类型，如Set，需要在env属性设置es6: true就支持新的 ES6 全局变量和类型了
plugins：是一个npm包，只是声明插件里的规则，但是这些规则并没有生效，需要在rules里配置才会生效。eslint-plugin-prettier： 把 prettier 的能力赋给 eslint，让 eslint 拥有和 prettier 一样的代码格式化能力，使用时可以省略 eslint-plugin 前缀，"plugins": ["prettier"]eslint-plugin-vue：使用ESLint来检测Vue文件，"plugins": ["vue"]@typescript-eslint/eslint-plugin：提供 TypeScript 相关的检查和规则。
extends：用于继承插件里的规则并生效，不需要再去rules里配置，每个配置继承它前面的配置。有3种规则配置：- eslint内置规则配置：实际配置文件在 eslint/conf 中可以找到
eslint:recommended：继承Eslint中推荐的规则eslint:all：继承Eslint中所有的核心规则
- 自定义的规则配置：（以eslint-config-开头的npm包），如
eslint-config-standard，是个流行的风格指南 - 插件中提供的规则配置：（以eslint-plugin-开头的npm包），如
eslint-plugin-vue，使用ESLint来检测Vue文件，可写plugin:vue/essential、plugin:vue/recommended、plugin:vue/vue3-recommended
- eslint内置规则配置：实际配置文件在 eslint/conf 中可以找到
rules：自行配置代码规范，会覆盖基础配置，常用规则说明：- 关闭规则：off 或 0
- 开启规则，警告：warn 或 1
- 开启规则，错误：error 或 2
globals：定义全局变量，否则会报 no-undef 错误。overrides：设置某些文件，禁用部分检查，如files匹配到的那些文件，均关闭 no-unused-expressions检查。“overrides”: [ {
“files”: [“-demo.ts",".spec.ts”],
“rules”: { “no-unused-expressions”: “off” }
} ]
使用
- 安装依赖包
eslint：yarn add eslint -D - 新建配置文件
.eslintrc.js： - 在scripts中新增lint命令：
"lint": "eslint ./src/**/*.ts" - 在终端中执行npm run lint，即可自动检查代码中的错误，可加上参数 --fix 进行自动恢复
"lint-fix": "eslint --fix ./src/**/*.ts"
参考案例
vue3项目
其他项目案例后续再补充
