必须协同配置，否则保存时会互相覆盖格式、触发无限循环或报错“cannot find module 'eslint-config-prettier'”；因prettier专注格式化（缩进、引号等）但无法检测逻辑错误，eslint专注代码质量（undefined变量、console等）但默认不强制统一格式细节，二者职责互补且不可替代。
Prettier 和 ESLint 必须协同配置，否则保存时会互相覆盖格式、触发无限循环或报错“Cannot find module 'eslint-config-prettier'”。
为什么不能只装 Prettier 或只装 ESLint
单独用 Prettier：能统一缩进、引号、换行，但对 undefined 变量、未使用变量、console.log 遗留等逻辑问题完全无感知；
单独用 ESLint：能报错也能自动修复（如 --fix），但默认规则不强制格式细节（比如对象属性是否换行、箭头函数参数括号是否省略），团队成员各自设置容易导致 Git diff 全是空格和分号变动。
二者共存时，常见错误现象包括：
– 保存后代码被反复格式化两次，光标跳动、编辑器卡顿
– eslint --fix 报错 Insert `;`，但 Prettier 配置了 semi: false，冲突直接暴露
– VSCode 提示 “No ESLint configuration found”，其实是因为 eslint-config-prettier 没装或版本不匹配
VSCode 中正确串联 ESLint + Prettier 的 4 个关键点
- 在项目根目录安装两个包：
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-react eslint-plugin-vue（按框架选插件） -
.eslintrc.js中必须把prettier放在extends数组末尾，顺序不能颠倒：extends: ['eslint:recommended', 'plugin:react/recommended', 'prettier'] -
settings.json中禁用 ESLint 自动格式化，只让它做校验："editor.formatOnSave": true且"editor.defaultFormatter": "esbenp.prettier-vscode"；同时关闭 ESLint 的格式化开关："eslint.format.enable": false - 确保
eslint-config-prettier版本与eslint主版本兼容（例如 ESLint v8.x 对应eslint-config-prettier@^8.0.0，v9.x 需升级到@^9.0.0）
Dev Container 场景下插件行为失效怎么办
在 .devcontainer.json 中启用插件需显式声明，VSCode 远程容器默认不加载本地已安装插件。
常见失效表现：
– 保存不格式化，Prettier 插件图标灰掉
– ESLint 不报错，终端里跑 npx eslint . 却能正常检测
解决方式：
– 在 .devcontainer.json 中添加 "customizations": { "vscode": { "extensions": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"] } }
– 确保容器内已安装 Node.js 且 node -v 输出与宿主机一致（否则 eslint CLI 找不到全局二进制）
– 若使用多根工作区，检查 workspace.code-workspace 是否设置了 "settings" 覆盖了容器级配置
路径别名（alias）导致 Path Intellisense 和 ESLint 警告不一致
当项目用 jsconfig.json 或 tsconfig.json 配置了 "paths"，比如 "@/*": ["src/*"]，会出现：
– Path Intellisense 能自动补全 import Button from '@/components/Button'
– 但 ESLint 仍报 Unable to resolve path to module '@/components/Button'
根本原因是 ESLint 默认不读取 TS/JS 配置里的 paths，需额外配置：
– 安装 eslint-import-resolver-typescript（TS 项目）或 eslint-import-resolver-node（JS 项目）
– 在 .eslintrc.js 的 settings 中加入：settings: { 'import/resolver': { typescript: { project: './tsconfig.json' } } }
– 注意：若用 Volar（Vue 3），还需确认 volar.ignoreProjectWarning 未设为 true，否则类型解析会被跳过
eslint-config-prettier 的版本锁死和 .devcontainer.json 中 extensions 的显式声明——这两处一漏，整个流水线就退化成“手动 lint + 手动 prettier”，所谓自动化只是幻觉。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
