环境：
node: v16.17.0
npm： 8.15.0
eslint: 8.57.0
安装依赖
npm install -D eslint@8.57.0
初始化eslint，会创建配置文件，安装相应依赖
npx eslint --init
检查文件命令：
简单版：
npx eslint src/app.vue
复杂版：可以穿入文件后缀名参数，忽略的文件，并且检查完修复
npx eslint src --ext .js,.vue,.ts,.jsx,.tsx --ignore-path .gitignore --fix
1.配置文件解析
1.1env节点
"env": {
"browser": true,
"commonjs": true,
"es2021": true
}
-
由于 ESLint 的各种规范中，一般都不允许使用未在页面内声明的成员
-
而开发中经常会用到 一些运行环境自带的 api，如：
- 浏览器中的 window/document 等
- nodejs中的 __dirname 等
- es2021中的 WeakRef 等
-
所以要告诉eslint，当前代码是运行在哪些环境中，这样检查时就不会报错了
1.2globals节点
- 当访问当前源文件内未定义的变量时，no-undef 规则将发出警告。如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。你可以使用注释或在配置文件中定义全局变量。
"globals": {
"_": true // 可以读取，可以修改
"$": false // 可以读取，不能修改 对应的规则：'no-global-assign': 'error'
}
- 也可以使用
globals节点来手动配置全局成员 - 注意：这个节点需要手动添加，默认是没有的
1.3 extends 节点
可以继承另一个配置文件的所有特征（包括 rules, plugins, and language options）
"extends": [
"eslint:all", //eslint内置的所有规范，280多个规则，一般不用，规则太多了
"eslint:recommended" //eslint内置推荐规范，60多个规则
"standard", // "eslint-config-standard" 第三方规则包
]
-
通过这个节点可以配置使用 内置规范 还是 第三方规范
- 这里配置的是 使用 第三方下载的
eslint-config-standard规范 - 注意：配置 extends时，可以省略
eslint-config-，直接写成standard
- 这里配置的是 使用 第三方下载的
继承插件中规则：
继承typescript插件中的规则
extends: ['plugin:@typescript-eslint/eslint-plugin/recommended'],
//简写形式：
extends: ['plugin:@typescript-eslint/recommended'],
继承vue插件中的规则
extends: ['plugin:vue/vue3-essential']
1.4配置解析器
解析器将代码转换为抽象语法树（Abstract Syntax Tree，AST），以便ESLint能够在其上执行静态分析和规则检查。
ESLint支持多个解析器，每个解析器都有自己的特点和适用范围。以下是一些常见的解析器：
Espree：Espree是一个轻量级的、快速的解析器，由ESLint团队开发。它基于Esprima，并与ESLint紧密集成。Espree支持ES5、ES6和ES7等多个ECMAScript版本。Babel-ESLint：Babel-ESLint使用Babel进行代码转换，以支持更新的JavaScript语法特性。它可以处理ES6+的代码，并将其转换为ES5语法，然后交由ESLint进行检查。@typescript-eslint/parser：如果项目使用TypeScript，@typescript-eslint/parser是一个用于解析TypeScript代码的解析器。它可以处理TypeScript的语法和类型注解，并与@typescript-eslint插件集成。vue-eslint-parser：vue-eslint-parser是专门用于解析Vue.js单文件组件的解析器。它能够解析Vue模板、JavaScript和样式块，并提供对Vue特定语法的支持
默认情况下，ESLint 使用 Espree 作为解析器。当解析器满足下列条件时，你可以选择在配置文件中指定不同的解析器
下列解析器与 ESLint 兼容：
- Esprima
- @babel/eslint-parser - Babel 解析器的包装以便与 ESLint 兼容。
- @typescript-eslint/parser - 将 TypeScript 转换为与 ESTree 格式兼容的解析器，好可以在 ESLint 中使用。
vue-eslint-parser
1.5配置插件
你可以用插件以各种不同的方式扩展 ESLint。插件可以包括：
- 自定义规则，以验证你的代码是否符合某个期望，以及如果不符合该期望该怎么做。
- 自定义配置。
- 自定义环境。
- 自定义处理器，从其他类型的文件中提取 JavaScript 代码，或在提示前对代码进行预处理。
ESLint 支持使用第三方插件。在使用插件之前，你必须使用 npm 安装它。如：
plugins: ['eslint-plugin-vue','@typescript-eslint/eslint-plugin']
简写形式
plugins: ['vue', '@typescript-eslint'],
使用插件：
rules: {
'@typescript-eslint/no-empty-function': 'error' //使用插件中的规则
},
1.6支持typescript
引入依赖：
npm install -D @typescript-eslint/eslint-plugin
npm install -D @typescript-eslint/parser
使用解析器：
parser: '@typescript-eslint/parser',
使用插件：
plugins: ['@typescript-eslint'],
继承插件中的规则
extends: ['plugin:@typescript-eslint/recommended'],
1.7支持vue
引入依赖：
npm install -D vue-eslint-parser
npm install -D eslint-plugin-vue
使用解析器：
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 12,
parser: '@typescript-eslint/parser',
sourceType: 'module',
},
使用插件：
plugins: ['vue', '@typescript-eslint'],
继承插件提供的规则：
extends: ['plugin:vue/vue3-essential', 'plugin:vue/essential', 'eslint:recommended'],
2.忽略文件
可以设置eslint忽略检查文件
创建.eslintignore文件
*.sh
node_modules
lib
*.md
*.scss
*.woff
*.ttf
.vscode
.idea
dist
mock
public
bin
build
config
index.html
src/assets
3.配置package.json
在package.json文件下配置：
"scripts": {
"lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
"fix": "eslint src --fix"
},
运行命令：
npm run lint:eslint
npm run fix
4.配置文件举例：
module.exports = {
root: true,
env: {
browser: true, //运行环境浏览器端
es2021: true,
node: true, //运行环境node
},
//指定解析器
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 12, //ecma版本是12
parser: '@typescript-eslint/parser', //指定ts解析器
sourceType: 'module', //在EcmaScript模块中，默认是module
},
//规则的继承
//eslint:recommended 开启eslint推荐规则 默认全部规则是关闭的 继承的规则可查看http://eslint.cn/docs/rules/
//plugin:vue/vue3-essential vue规则
extends: ['plugin:vue/vue3-essential', 'plugin:vue/essential', 'eslint:recommended'],
//插件 省略了eslint-plugin-前缀
plugins: ['vue', '@typescript-eslint'],
//可以为特定的类型文件指定处理器
overrides: [
{
files: ['*.ts', '*.tsx', '*.vue'],
rules: {
'no-undef': 'off',
},
},
],
rules: {
// http://eslint.cn/docs/rules/
// https://eslint.vuejs.org/rules/
// https://typescript-eslint.io/rules/no-unused-vars/
'@typescript-eslint/ban-ts-ignore': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-var-requires': 'error',
'@typescript-eslint/no-empty-function': 'off',
'@typescript-eslint/no-use-before-define': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/ban-types': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-redeclare': 'error',
'@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
'@typescript-eslint/no-unused-vars': [2],
'vue/custom-event-name-casing': 'off',
'vue/attributes-order': 'off',
'vue/one-component-per-file': 'off',
'vue/html-closing-bracket-newline': 'off',
'vue/max-attributes-per-line': 'off',
'vue/multiline-html-element-content-newline': 'off',
'vue/singleline-html-element-content-newline': 'off',
'vue/attribute-hyphenation': 'off',
'vue/html-self-closing': 'off',
'vue/no-multiple-template-root': 'off',
'vue/require-default-prop': 'off',
'vue/no-v-model-argument': 'off',
'vue/no-arrow-functions-in-watch': 'off',
'vue/no-template-key': 'off',
'vue/no-v-html': 'off',
'vue/comment-directive': 'off',
'vue/no-mutating-props': 'off',
'vue/no-parsing-error': 'off',
'vue/no-deprecated-v-on-native-modifier': 'off',
'vue/multi-word-component-names': 'off',
'no-useless-escape': 'off',
'no-sparse-arrays': 'off',
'no-prototype-builtins': 'off',
'no-constant-condition': 'off',
'no-use-before-define': 'off',
'no-restricted-globals': 'off',
'no-restricted-syntax': 'off',
'generator-star-spacing': 'off',
'no-unreachable': 'off',
'no-multiple-template-root': 'off',
'no-unused-vars': 'error',
'no-v-model-argument': 'off',
'no-case-declarations': 'off',
'no-console': 'error',
'no-redeclare': 'off',
'no-mixed-spaces-and-tabs': 'off',
},
};
