配好 ESLint + Prettier 需装三插件：ESLint（官方）、Prettier（官方）、EditorConfig（推荐）；须本地安装 eslint、配置 eslint-config-prettier 并置于 extends 末位；VS Code 中禁用 formatOnSave，启用 codeActionsOnSave 修复 ESLint 问题。
VS Code 里装哪些插件才算配好 ESLint + Prettier
只装插件不配置，等于没装。核心是这三样：ESLint（官方插件）、Prettier（官方插件）、EditorConfig for VS Code（可选但推荐）。注意别装错名字，比如搜 Prettier ESLint 这类拼接名插件，基本是过时或冗余的。
装完后重启 VS Code，否则插件可能不激活。尤其 ESLint 插件依赖项目本地安装的 eslint 包，它不会自动 fallback 到全局版本——这点很多人卡住。
- 确保项目根目录有
package.json，且已执行npm install eslint --save-dev或yarn add eslint -D - 如果用 TypeScript，还要加
@typescript-eslint/eslint-plugin和@typescript-eslint/parser -
Prettier插件本身不带校验能力，它只负责格式化；ESLint 负责代码质量检查，两者职责不能互换
如何让 ESLint 和 Prettier 不打架
默认情况下，Prettier 的格式规则会和 ESLint 的样式类规则（比如 indent、quotes）冲突，保存文件时来回覆盖。必须显式禁用 ESLint 中与 Prettier 重叠的规则。
最稳妥的做法是安装 eslint-config-prettier 并在 .eslintrc.js 里关掉所有冲突规则：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'prettier' // ← 这行必须放在最后
]
};
- 顺序很重要：
prettier必须是extends数组的最后一项，否则会被前面的规则覆盖 - 不要手动写
rules: { 'no-unused-vars': 'off' }这类关闭语句，交给eslint-config-prettier统一处理更可靠 - 如果用了
eslint-plugin-prettier（把 Prettier 当作 ESLint 规则运行），需额外加'plugin:prettier/recommended'到extends，但多数现代项目已不推荐这种耦合方式
保存时自动修复，但只修 ESLint 能修的，不是全部格式
VS Code 默认的 editor.codeActionsOnSave 设置容易误解：它触发的是 ESLint 的 fix，不是 Prettier 的格式化。所以如果你关掉了 eslint-config-prettier，或者没配 "eslint.autoFixOnSave": true，保存时什么都不会发生。
推荐在 .vscode/settings.json 中明确声明行为：
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": false,
"eslint.validate": ["javascript", "typescript", "vue"]
}
-
"editor.formatOnSave": false是关键——避免 Prettier 插件和 ESLint 插件同时抢着格式化 -
"eslint.validate"要列全你实际用的文件类型，比如写 Vue 就得加上"vue"，否则.vue文件里的<script>块不会被检查 - 如果真想用 Prettier 格式化注释、HTML 或 CSS，可以单独绑定快捷键（如
Shift+Alt+F），而不是让它参与保存流程
为什么改了配置还是不生效？先查这几个地方
常见失效不是配置写错了，而是 VS Code 没读到正确配置路径，或项目结构干扰了规则加载。
- 检查
.eslintrc.*是否在真正的工作区根目录（不是父文件夹），VS Code 只认打开文件夹下的配置 - 运行
npx eslint . --ext .js,.ts --quiet看终端是否报错，如果 CLI 能跑通但 VS Code 不行，基本是插件没启用或工作区设置被覆盖 - 某些 monorepo 工具（如 pnpm workspace、Nx）会让 ESLint 找不到依赖，需要在
.eslintrc.js里显式指定parserOptions.project指向tsconfig.json - Vue 项目中，若用
<script setup>，必须确保@vue/eslint-config-typescript版本 ≥ 12.0.0，老版本不识别新语法
最常被忽略的是：ESLint 插件只对打开的文件生效，且依赖当前文件的 language mode（右下角显示 JavaScript / TypeScript / Vue）。如果显示为 Plain Text，再好的配置也没用——先点它，选对语言模式。
