ESlint 配置
eslint两种主要的配置方式
Configuration Comments（配置注释）：使用js注释，将配置信息直接嵌入到单个文件中。也就是生成在单个文件的配置，不
侵入全局配置
Configuration Files （配置文件）：使用js文件，为整个目录及其所有子目录指定配置信息。也就是生成在整个项目的配置，做
到统一管理
eslint中可以配置的核心选项
-
Globals（全局变量）
告诉eslint哪些全局变量是合法的，避免 no-undef 规则误报。browser（浏览器全局变量）、node（node全局变量）、自定义
-
Rules（规则）
eslint的核心，定义哪些规则开启以及错误级别（off / warn / error）
-
Plugin（插件）
扩展eslint能力，支持框架、ts、非标准语法等
配置优先级
后定义覆盖先定义，局部覆盖全局（优先级从高到低）
1.行内配置（Inline Config）：代码注释中的规则，优先级最高
2.配置文件后定义的配置对象：flat Config数组中，后面的配置覆盖前面的
3. 配置文件中先定义的配置对象
4.继承的可共享配置
5.eslint内置默认规则，优先级最低
file和ignore
// eslint.config.js
import { defineConfig } from "eslint/config";
export default defineConfig([
// matches all files ending with .js
{
files: ["**/*.js"],
rules: {
semi: "error",
},
},
// matches all files ending with .js except those in __tests
{
files: ["**/*.js"],
ignores: ["__tests/**"],
rules: {
"no-console": "error",
},
},
]);
其中 files
---- *.js 表示匹配当前目录所有的js文件
---- ** / *.js表示匹配所有子目录的js文件
---- ！ 取反， ！** /——tests—— / **表示排除test目录
---- **/ *.{js,ts,vue} 匹配js/ts/vue 文件
全局忽略和局部忽略
如果配置对象仅写了ignore没有其他属性，那就是全局忽略
如果和files、rules写在一起，就是局部忽略，仅对当前配置对象起作用
eslint本身没有files/ignore的指定配置对象，如果没有配置，它会自动应用到其他配置对象匹配到的所有文件
也就是说如果你这个对象没配置，它就会变成全局规则，就会对所有的eslint检查文件生效。简单来说，比如我写了一条规则，但是我没有file和ignore，那我就会变成全局规则，我写的规则要对全局生效
plugin
本质是一个npm包，用来给eslint扩展能力，没有plugineslint只能检查原生js，不能检查vue、ts等
常见插件
elint-plugin-vue--检查vuetypescript-eslint/eslint-plugin--检查tseslint-plugin-import--检查导入导出eslint-plugin-prettier--把prettier规则变成eslint规则eslint-plugin-html--检查html里面的js
先import，再在plugin里注册
extends
extends 就是继承别人的一套规则，先import插件，再在extends里引用
extends能启用什么
1.官方推荐规则
2.插件提供的配置（比如：plugin:vue/recommended）
3.第三方共享配置 （比如：eslint-config-airbnb-base）
常见extends值
js/recommended--官方js推荐规则plugin:vue/essential--vue基础规则plugin:vue/recommended--vue完整规则plugin:@typescript-eslint/recommanded--ts推荐规则
languageOptions
是eslint配置对象的内置属性，用来配置代码的语言环境
配置全局变量
解决 window / document / process 等环境变量报错 no-undof 错误的问题
languageOptions: {
global: global.browser
// 声明浏览器环境的所有全局变量,可选
}
配置解析器
解决eslint 不认识ts/es6+语法的问题
默认解析器是 espree（解析js）
languageOptions: {
parser: tsParser
// 用ts解析器解析ts代码
parserOptions: {
ecmaVersion: "latest"
// 支持最新ES语法（默认就是latest，可以省略）
sourceType: "module"
// 声明ES模块（前端项目默认，可以省略）
}
}
核心逻辑
languageOption是配置对象的属性，作用范围由 failes决定，可以给不同文件配置不同的语言环境
Parser
由于eslint看不懂源代码，需要靠parser把代码翻译成ast，让eslint能检查
parser默认解析器是espree，不同的文件有不同的解析器
processor
从非js文件里找到js文件交给eslint检查。把js/ts翻译成ast，再从.vue / .html 等文件里面提取js块
export default defineConfig([
{
files: ["**/*.vue"],
processor: "vue/vue",
parser: "vue-eslint-parser"
}
])
