必须为每种语言 ID 单独配置 editor.defaultFormatter
想让 VS Code 的格式化功能乖乖听话，有个关键细节必须拿捏准：必须为每种语言 ID 单独配置 editor.defaultFormatter。否则，编辑器要么回退到内置的简陋格式化器，要么干脆静默跳过，让你的保存时格式化（formatOnSa ve）形同虚设。
怎么确认当前文件的真实语言 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 中正确绑定格式化器
知道了语言 ID，接下来就是在配置文件中正确“点名”。这里有两个必须遵守的格式规则：
- 语言级配置必须写成
"[language-id]"这种带方括号的形式。 - 格式化器的 ID 必须和它在扩展市场里的完整名称一字不差。
几个常用的格式化器 ID 千万别写错：
- Prettier 的是
esbenp.prettier-vscode（不是prettier或prettier-vscode）。 - Python 的 Black 是
ms-python.black-formatter（注意末尾的-formatter，不是black）。 - ESLint 的是
dbaeumer.vscode-eslint（这是扩展的 ID，不是eslint）。
正确的配置示例应该像下面这样，放在你的用户或工作区 settings.json 中：
{
"[ja vascript]": { "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]" 是两个不同的语言 ID，必须分开写。如果只配置了前者，那么所有的 .tsx 文件都不会触发你设定的格式化器。
为什么保存时没反应，或者弹出“没有可用的格式化程序”
配置写对了，但格式化还是不工作？别急，问题往往出在几个前置条件上：
- 语言模式不对：检查右下角，如果显示的是
Plain Text或普通的Ja vaScript（而不是Ja vaScript React），点击它切换成正确的模式。 - 扩展未启用：在远程开发（如 Dev Containers, WSL）时，像
esbenp.prettier-vscode这样的扩展必须安装在远程端，而不是本地。 - 总开关没开：
editor.formatOnSa ve是一个独立开关，必须显式地设置为true。 - 格式化器自身有要求：以 Prettier 为例，它通常要求项目根目录下有配置文件（如
.prettierrc,prettier.config.js，或package.json中包含"prettier"字段）才会真正生效。 - 多个格式化器冲突：当同一个语言安装了多个格式化扩展时，VS Code 的执行顺序并不确定。最可靠的办法是直接禁用那些不用的扩展，而不是试图靠设置调整优先级。
项目级配置 vs 全局配置，该放哪
最后，聊聊配置该放在哪的问题。这对于团队协作或者项目间技术栈差异大的情况至关重要。
答案是：优先使用项目级的 .vscode/settings.json 文件。原因如下：
- 优先级高：项目级配置的优先级高于你的用户全局设置，打开项目文件夹时会自动加载。
- 便于协作：这个文件应该提交到 Git 仓库。这样，任何新成员克隆项目后，都能立刻获得一致的格式化环境，避免“在我机器上是好的”这类问题。
- 避免冲突：不要在全局的
settings.json里写死某个语言的格式化器。不同项目可能分别使用 Prettier、ESLint 或其他工具，全局硬性统一反而会导致在某些项目中失控。 - 多根工作区注意：如果你使用多根工作区（Multi-root Workspace），每个子项目都需要有自己的
.vscode/settings.json，父目录的配置不会被继承。
说到底，VS Code 的格式化机制其实很“直白”：它不会自动探测你装了啥。它只认你白纸黑字写在配置里的“语言 ID + 格式化器 ID”组合。漏掉一个 [typescriptreact]，就等于主动放弃了对所有 .tsx 文件的代码风格控制权。
