必须为每种语言id单独配置editor.defaultformatter，如[typescriptreact]和[javascript]需分别设置；语言id以右下角显示为准，通过developer: inspect editor tokens and scopes确认；格式化器id须与扩展市场完全一致，且配置需写成"[language-id]"形式。
必须为每种语言 ID 单独配置 editor.defaultFormatter，否则 VS Code 会 fallback 到内置格式器或静默跳过。
怎么确认当前文件的真实语言 ID
VS Code 不按文件后缀判断格式化行为，而是依赖编辑器右下角显示的“Language ID”。比如：
- .tsx 文件的语言 ID 是
typescriptreact，不是typescript - .vue 文件是
vue，.svelte 是svelte，.astro 是astro - 点右下角语言名称 → 选“Configure Language Specific Settings”可直接跳转到对应语言块
- 更准的方法：按
Ctrl+Shift+P→ 输入Developer: Inspect Editor Tokens and Scopes→ 看右上角 “Language ID” 字段
如何在 settings.json 中正确绑定格式化器
语言级配置必须写成 "[language-id]" 形式，且格式化器 ID 必须与扩展市场完全一致：
-
esbenp.prettier-vscode（不是prettier或prettier-vscode） -
ms-python.black-formatter（注意末尾-formatter，不是black） -
dbaeumer.vscode-eslint（ESLint 扩展的 ID，不是eslint） - 配置示例（放在用户或工作区
settings.json中）：
{
"[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[python]": { "editor.defaultFormatter": "ms-python.black-formatter" },
"[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
}
⚠️ 注意："[typescript]" 和 "[typescriptreact]" 必须分开写；只配前者，.tsx 文件根本不会触发格式化。
为什么保存时没反应，或者弹出“没有可用的格式化程序”
常见原因不是配置错，而是流程卡在前置条件上：
- 右下角语言模式显示
Plain Text或JavaScript（而非JavaScript React）→ 点击切换 - 扩展未在当前工作区启用：远程开发时，
esbenp.prettier-vscode必须装在 remote 端 -
editor.formatOnSave没开 → 它是独立开关，必须显式设为true - Prettier 要求项目有配置文件才真正生效：
.prettierrc、prettier.config.js（不是.prettierrc.js），或package.json中含"prettier"字段 - 多个同语言格式化器共存时，VS Code 不保证执行顺序；禁用不用的扩展比靠设置压优先级更可靠
项目级配置 vs 全局配置，该放哪
团队协作或跨项目差异大时，.vscode/settings.json 是唯一靠谱路径：
- 它优先级高于用户设置，打开该文件夹即自动加载
- 必须提交到 Git，否则新成员 clone 后格式化规则不生效
- 不要在全局
settings.json里写"[javascript]"块来统一所有项目——不同项目可能用 Prettier 或 ESLint，硬统一反而失控 - 多根工作区下，每个子项目需有自己的
.vscode/settings.json，父目录配置不继承
最易被忽略的一点：VS Code 从不“自动发现”你装了什么格式化器。它只响应你明确告诉它的语言 ID + 格式化器 ID 组合。漏一个 [typescriptreact]，就等于对所有 .tsx 文件放弃控制。
