这一层，主要就是一个配置文件：
.eslintrc.js
下面，将全面的全链路+配置内容介绍一下这个文件
.eslintrc.js 全链路解析
一、核心定位
.eslintrc.js 是 ESLint 的配置文件 ，属于五层结构中的第二层（工程配置层）。
它解决的核心问题是：统一团队代码风格 + 提前发现潜在错误。
没有 ESLint → 10个程序员写10种风格的代码，合并代码时全是冲突
有 ESLint → 所有人遵循同一套规则，代码像一个人写的二、ESLint 的两个组成部分（这是最关键的认知）
要理解 ESLint 的全链路，必须区分两个东西：
| 组成部分 | 是什么 | 作用 | 类比 |
|---|---|---|---|
| npm 包 | 项目依赖，安装在 node_modules |
提供规则引擎、解析代码、检查逻辑 | 发动机 |
| IDE 插件 | VSCode/JetBrains 插件 | 在编辑器中显示波浪线、保存时自动修复 | 仪表盘 |
两者关系：
IDE 插件调用 npm 包来执行检查。没有 npm 包，插件不知道规则是什么；没有插件，你只能在终端看报错，没有红色波浪线。
工作流程：
写代码
↓
IDE 插件检测到输入
↓
插件调用项目中的 ESLint npm 包（node_modules/.bin/eslint）
↓
npm 包读取 .eslintrc.js 规则
↓
解析代码，按规则检查
↓
返回错误/警告给 IDE 插件
↓
IDE 显示红色波浪线三、安装配置全链路（按顺序操作）
第 1 步：安装 npm 依赖（核心引擎）
在项目终端执行：
bash
# 安装 ESLint 核心包（开发依赖）
npm install eslint --save-dev
# 如果使用 Vue，还需要安装 Vue 专用插件
npm install eslint-plugin-vue --save-dev
# 如果使用 TypeScript
npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev这些包会被安装在 node_modules 中，是 ESLint 真正执行检查的代码。
第 2 步：初始化配置文件
bash
npx eslint --init执行后会进入交互式问答，选择你的项目配置：
- 如何使用 ESLint？（检查语法 + 发现问题 + 强制代码风格）
- 使用什么模块系统？（ES modules / CommonJS）
- 项目用什么框架？（Vue / React / None）
- 是否使用 TypeScript？
- 代码运行环境？（浏览器 / Node）
- 输出什么格式的配置文件？（JavaScript / JSON / YAML）
产物：在项目根目录生成 .eslintrc.js 配置文件。
第 3 步：安装 VS Code 插件（可视化显示）
- 打开 VS Code 扩展商店（
Ctrl+Shift+X） - 搜索
ESLint - 安装由 Microsoft 维护的官方插件（ID:
dbaeumer.vscode-eslint）
这一步让代码中出现红色波浪线。
第 4 步：配置 VS Code 保存时自动修复
在 VS Code 的 settings.json 中添加：
json
{
// 保存时自动运行 ESLint 修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// 可选：保存时自动格式化整个文件
"editor.formatOnSave": true
}效果：每次保存文件，ESLint 自动修复可修复的问题（如缩进、分号、引号）。
四、.eslintrc.js 配置文件详解
完整示例（Vue 3 项目）
javascript
// .eslintrc.js
module.exports = {
// root: true 表示 ESLint 找到这个文件就停止向上查找
// 防止被项目上级目录的其他 ESLint 配置影响
root: true,
// env: 代码运行环境，决定哪些全局变量是预定义的
// 比如 browser: true 就有 window、document，不需要安装也会存在
env: {
browser: true, // 浏览器全局变量（window、document等）
es2021: true, // ES2021 语法支持
node: true, // Node.js 全局变量（require、process等）
},
// extends: 继承别人写好的规则集（不用自己一条条写）
// "eslint:recommended" 是 ESLint 官方推荐的规则
// "plugin:vue/vue3-recommended" 是 Vue 官方推荐的规则
extends: [
"eslint:recommended", // 官方推荐规则
"plugin:vue/vue3-recommended", // Vue 3 推荐规则
],
// parserOptions: 告诉 ESLint 如何解析你的代码
parserOptions: {
ecmaVersion: "latest", // 使用最新 ECMAScript 语法
sourceType: "module", // 使用 ES 模块（import/export）
},
// plugins: 引入第三方规则集
// 安装 eslint-plugin-vue 后，要在这里声明才能使用
plugins: [
"vue", // 启用 Vue 插件
],
// rules: 自定义规则（优先级最高，覆盖 extends）
// 每个规则有三个级别：
// "off" 或 0 → 关闭
// "warn" 或 1 → 警告（黄色波浪线）
// "error" 或 2 → 错误（红色波浪线，构建会失败）
rules: {
// 强制使用单引号，错误级别是 error
"quotes": ["error", "single"],
// 禁止未使用的变量，警告级别（不阻塞构建）
"no-unused-vars": "warn",
// 禁止 console.log，警告级别
"no-console": "warn",
// 强制缩进 2 个空格
"indent": ["error", 2],
// 强制每行结尾加分号
"semi": ["error", "always"],
// Vue 模板缩进 2 格
"vue/html-indent": ["error", 2],
// 关闭某条规则
"vue/max-attributes-per-line": "off",
}
}五、rules 规则的三种严重级别详解
| 级别 | 写法 | 编辑器表现 | 构建时表现 | 适用场景 |
|---|---|---|---|---|
"off" |
0 或 "off" |
不提示 | 不影响 | 团队不关心这条规则 |
"warn" |
1 或 "warn" |
黄色波浪线 | 警告，不阻塞构建 | 建议遵守但不强制 |
"error" |
2 或 "error" |
红色波浪线 | 阻塞构建，CI 失败 | 必须遵守的硬性规范 |
常见配置示例：
javascript
rules: {
"quotes": ["error", "single"], // 双引号直接报错
"no-console": ["warn"], // console.log 只是警告
"no-debugger": "error", // debugger 直接报错
"no-alert": "off", // 允许使用 alert
}六、命令行运行（不依赖 IDE）
即使没有 IDE 插件，ESLint 也能在终端运行：
bash
# 检查 src 目录下所有 .js 和 .vue 文件
npx eslint --ext .js,.vue src
# 检查并自动修复
npx eslint --ext .js,.vue src --fix
# 在 package.json 中配置脚本
"scripts": {
"lint": "eslint --ext .js,.vue src",
"lint:fix": "eslint --ext .js,.vue src --fix"
}适用场景：
- CI/CD 流水线中自动检查代码质量
- Git Hook 提交前自动检查
- 没有 IDE 的开发环境
七、IDE 插件 vs npm 依赖对比
| 对比维度 | VS Code 插件 | npm 包（eslint） |
|---|---|---|
| 安装方式 | 扩展商店点击安装 | npm install eslint --save-dev |
| 存储位置 | VS Code 的 extensions 目录 | 项目的 node_modules |
| 提供什么 | 编辑器集成（波浪线、自动修复） | 规则引擎、解析器、检查逻辑 |
| 能否单独工作 | ❌ 需要 npm 包才能检查 | ✅ 可以单独运行（但只能看终端输出） |
| 版本管理 | 插件版本独立 | 项目内版本锁定（package-lock.json） |
核心认知：
插件负责"展示"，npm 包负责"干活"。两者缺一不可。
八、与 package.json 中 scripts 的关系
json
{
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "eslint --ext .js,.vue src",
"lint:fix": "eslint --ext .js,.vue src --fix"
}
}为什么要把 ESLint 写在 scripts 里？
| 执行方式 | 适用场景 | 说明 |
|---|---|---|
npm run lint |
CI/CD、Git Hooks、团队统一检查 | 不依赖 IDE，全平台一致 |
| VS Code 插件 | 日常开发 | 实时看到错误，保存时自动修复 |
最佳实践：两者都要配置。
- 日常开发用 VS Code 插件 + 保存时自动修复（效率高）
- 提交前用 Git Hook 跑
npm run lint（保证没遗漏）
九、完整链路总结图
text
┌─────────────────────────────────────────────────────────────┐
│ ESLint 全链路架构 │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────┐ ┌──────────────────────────────┐ │
│ │ 写代码 │───────▶│ VS Code / JetBrains IDE │ │
│ └──────────────┘ │ (ESLint 插件) │ │
│ │ 功能：显示波浪线、自动修复 │ │
│ │ │
│ │ 调用 │
│ ▼ │
│ ┌──────────────────────────────┐ │
│ │ node_modules/.bin/eslint │ │
│ │ (npm 包：规则引擎+解析器) │ │
│ │ │
│ │ 读取 │
│ ▼ │
│ ┌──────────────────────────────┐ │
│ │ .eslintrc.js │ │
│ │ (规则配置：extends + rules) │ │
│ │ │
│ │ 输出 │
│ ▼ │
│ ┌──────────────────────────────┐ │
│ │ 错误/警告返回 IDE │ │
│ │ → 红色/黄色波浪线 │ │
│ └──────────────────────────────┘ │
│ │
│ 可选补充： │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ package.json → "scripts": { "lint": "eslint ..." } │ │
│ │ CI/CD 或终端执行：npm run lint │ │
│ └──────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘十、一句话总结
text
npm 包（eslint） = 发动机（执行检查）
IDE 插件（ESLint） = 仪表盘（显示结果）
.eslintrc.js = 驾驶手册（定义规则）
三者结合 → 写代码时实时看到错误，保存时自动修复，提交时自动拦截不规范代码