Prettier在VSCode中需显式绑定语言块才能生效，仅装插件并开启formatOnSave无效；必须在settings.json中为各语言（如typescript、javascript）配置"editor.defaultFormatter": "esbenp.prettier-vscode"，且优先级高于全局设置；同时须配合.eslintrc中eslint-config-prettier禁用格式冲突规则，避免与ESLint打架。
Prettier 在 VSCode 里不是装上插件就自动干活的——必须显式指定它是哪个语言的默认格式化器，否则 editor.formatOnSave 会失效或调用错工具。
VSCode 必须手动设置 editor.defaultFormatter 才能生效
很多人装完 esbenp.prettier-vscode 插件，开了 editor.formatOnSave，但保存时代码完全没变化。根本原因是：VSCode 默认不把 Prettier 当作任何语言的格式化主力，它只是“待命”，等你点名。
你需要在 settings.json 里明确告诉 VSCode：“对 TypeScript 文件，就用 Prettier”：
{
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
注意：[typescript] 这种写法是语言专属配置，比全局 editor.defaultFormatter 更可靠；如果只写全局项，某些语言（比如 Vue 或 Markdown）可能仍走内置格式器。
- 不配语言块 → 保存时可能无反应，或触发 ESLint 自带的弱格式化
- 配了但拼错 ID（如写成
prettier.prettier-vscode）→ 控制台报Unknown formatter - 同时配了 ESLint 的
source.fixAll但没关 ESLint 自带格式 → 两者打架，代码被反复重排
prettier 和 eslint 的分工必须理清
Prettier 只做一件事：按规则重排代码结构（缩进、换行、引号、分号）。ESLint 的 fix 能力是补丁式的，比如删掉未使用变量、补 await，但它不该负责换行对齐。
常见错误配置：
"editor.codeActionsOnSave": {
"source.fixAll": true
}
这会让 ESLint 尝试修复所有问题，包括它本不该碰的格式项，结果和 Prettier 冲突。正确做法是只让它修逻辑问题：
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
再配合 eslint-config-prettier 关闭所有和 Prettier 重叠的规则（比如 quotes、semi），否则你会看到 ESLint 报红，Prettier 又把它改回去。
.prettierrc 文件比 setting.json 配置更优先
VSCode 设置里的 prettier.semi、prettier.singleQuote 等选项，只是 fallback。一旦项目根目录存在 .prettierrc（或 .prettierrc.json、prettier.config.js），VSCode 会直接读取它，setting.json 里的 prettier 相关项会被忽略。
推荐直接建 .prettierrc，内容简洁明了：
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 80
}
- 改了这个文件后，不用重启 VSCode，保存即生效
- 团队协作时，这个文件比个人 settings 更可复现
- 如果用
prettier.config.js，记得导出对象：module.exports = { semi: false }
格式化快捷键和右键菜单有时不工作？检查语言模式
按下 Shift+Alt+F 没反应，或右键菜单里没有 Format Document，大概率是当前文件的语言模式没识别对。VSCode 左下角状态栏会显示当前语言（如 Plain Text、JavaScript React）。
解决方法：
- 点击左下角语言名 → 选择正确类型（如
TypeScript，不是TypeScript React，除非你真用了 JSX） - 确保文件扩展名匹配：.ts → TypeScript，.tsx → TypeScript React
- 如果用
vue文件，需额外配"[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }，且安装Volar（非旧版 Vetur）
最隐蔽的问题是：VSCode 有时缓存了错误的语言关联，关掉文件再重开，或执行命令 Change Language Mode 强制刷新一次。
