ESLint 和 Prettier 必须明确分工：ESLint 专注逻辑检查与潜在错误，Prettier 专责格式化；需通过 extends: ["eslint:recommended", "prettier"]（prettier 必须置末）禁用 ESLint 所有格式规则，并在 VSCode 中设 "editor.defaultFormatter": "esbenp.prettier-vscode" 且禁用 ESLint 格式能力。
ESLint 和 Prettier 不是“装了就能用”，它们默认会互相干扰——比如 semi 规则冲突导致保存时代码反复加/删分号，根本没法正常写代码。必须明确分工、切断规则重叠，才能真正保驾护航。
为什么 ESLint + Prettier 一起开就报红还乱格式？
根本原因是：ESLint 默认自带大量格式类规则（如 indent、quotes、semi），而 Prettier 也强制执行自己的格式偏好。两者没协商好谁说了算，编辑器就来回调用，结果就是光标乱跳、代码抖动、Problems 面板塞满无关警告。
- 典型现象：
Ctrl+S后分号消失 → 立刻报 ESLintsemi错误 → 再次保存又加上分号 → 循环开始 - 本质不是插件bug，而是配置没让 ESLint “让出格式权”
- 不能只靠 VS Code 设置里的
editor.defaultFormatter，那只是指定“谁来格式化”，没解决“ESLint 别管格式”这个前提
怎么配 .eslintrc.js 才算真正协同？
核心动作只有一条：在 ESLint 配置里引入 prettier 插件，并用 extends: ["prettier"] 覆盖掉所有与格式相关的内置规则。这不是可选项，是必须项。
- 确保已安装
eslint-config-prettier：npm install eslint-config-prettier --save-dev -
extends数组里，"prettier"必须放在最后，否则会被前面的 extends 覆盖 - 不要手动关单个格式规则（比如写
"semi": "off"），那样漏掉的规则迟早出问题 - 示例最小可行配置：
module.exports = {
extends: [
"eslint:recommended",
"prettier" // ← 这一行必须有，且放最后
],
rules: {
"no-console": "warn"
}
};
VS Code 设置里哪些开关真有用？
插件装了、配置写了，但 VS Code 自身设置不对，照样不生效。关键就三个开关，缺一不可：
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
-
editor.formatOnSave设为true：触发保存即格式化 -
editor.defaultFormatter设为"esbenp.prettier-vscode"：明确告诉编辑器“格式化这事归 Prettier 管” -
editor.codeActionsOnSave里启用"source.fixAll.eslint"：让 ESLint 只修逻辑问题（比如no-unused-vars），不碰格式
注意：eslint.validate 字段已过时，新版推荐用 "eslint.options": { "extensions": [".js", ".jsx"] } 替代，避免规则不生效。
遇到保存没反应或报错找不到 ESLint 怎么办？
常见于项目根目录没 .eslintrc.*，或 ESLint 没装在项目本地。VS Code 的 ESLint 插件默认优先找项目级 node_modules/eslint，而不是全局安装的。
- 检查终端运行
npx eslint --version是否成功，失败就说明项目没装 ESLint - 运行
npx eslint --init生成配置文件，选“JavaScript modules (import/export)”和“React”等实际用到的环境 - 如果坚持用全局 ESLint（不推荐），需在 VS Code 设置里加
"eslint.packageManager": "npm"并指定全局路径，但跨项目易出兼容问题 - 插件输出面板（Output → ESLint）里看具体错误，常是
Cannot find module 'eslint-plugin-react'这类缺失依赖
真正麻烦的从来不是装插件，而是让两个工具承认彼此的边界——Prettier 不查 bug，ESLint 不动缩进。这点没立住，再多插件也只是噪音。
