根本原因是ESLint和Prettier规则冲突，如semi规则不一致导致格式抖动；解决方法是明确分工——Prettier管格式、ESLint管逻辑，并用eslint-config-prettier禁用ESLint格式规则，VSCode设Prettier为默认格式器且启用codeActionsOnSave自动修复。
ESLint 和 Prettier 为什么总在互相覆盖
根本原因是两者都试图修改同一段代码的格式，但规则不一致。比如 semi 规则在 ESLint 里设为 ["error", "always"]，而 Prettier 默认禁用分号，保存时就会出现“加了又删、删了又加”的抖动现象。
解决路径不是禁用其中一个，而是明确分工：Prettier 负责所有格式细节（缩进、引号、括号、换行），ESLint 只管逻辑和规范（未使用变量、console、eval 等）。
- 必须安装
eslint-config-prettier，它会关闭 ESLint 中所有与格式相关的规则 - 在
.eslintrc.js的extends数组末尾加上'prettier'，确保它最后生效 - VSCode 设置中只启用
esbenp.prettier-vscode作为默认格式器，不要同时设 ESLint 为格式器
如何让保存自动修复 + 格式化一步到位
很多人开了 editor.formatOnSave 却发现 ESLint 的 --fix 不生效，问题出在触发机制没对齐。
ESLint 插件默认只在“诊断”阶段报告问题，不自动修复；而 Prettier 是直接格式化文本。要让两者协同，得靠 VSCode 的 codeActionsOnSave 配置。
- 在
settings.json中添加："editor.codeActionsOnSave": {"source.fixAll.eslint": true} - 确保项目里已安装
eslint和eslint-plugin-react（如需）等对应插件，仅装 VSCode 插件不够 - 如果用了 TypeScript，还要确认
eslint.validate包含"typescript"和"typescriptreact"
React/Vue 项目里怎么避免模板语法报错
JSX 或 Vue SFC 的 <template> 块常被 ESLint 当成纯 JS 解析，导致 Unexpected token < 这类错误。这不是插件坏了，是解析器没配对。
关键在于告诉 ESLint：“这段不是 JS，是 JSX / Vue”，这依赖解析器和插件组合。
- React 项目必须用
@babel/eslint-parser或@typescript-eslint/parser替代默认espree - Vue 项目需配合
eslint-plugin-vue，并在.eslintrc.js中加入parserOptions.parser: '@typescript-eslint/parser'（TS 项目）或'@babel/eslint-parser'（JSX 项目） - VSCode 的文件关联也要对：检查右下角语言模式是否为
javascriptreact或vue，否则插件不会加载对应规则
为什么改了配置还是没效果
VSCode 插件行为受三层配置叠加影响：全局设置、工作区设置、项目根目录配置文件。优先级是「项目 > 工作区 > 全局」，但很多人只改了其中一层。
最常被忽略的是项目级配置文件的存在性和加载状态。VSCode 不会报错说“找不到 .eslintrc”，而是静默 fallback 到默认规则。
- 打开命令面板（
Ctrl+Shift+P），运行Developer: Toggle Developer Tools，看 Console 是否有ESLint: Failed to load config类错误 - 检查
.eslintrc.js是否导出合法对象，常见错误是忘记module.exports = { ... } - 确认 node_modules 里确实装了
eslint和prettier，VSCode 插件本身不带这些运行时依赖
插件协同不是装完就完事，它本质是一套配置契约——Prettier 定边界，ESLint 守底线，VSCode 做调度。任何一环松动，都会在保存那一刻暴露出来。
