VS Code 怎样为不同语言设置独立格式化器

在 VS Code 中，为不同语言分别设置 editor.defaultFormatter 即可独立选择格式化器。最直观的方法是打开设置，先加 @lang:javascript 等语言过滤器，再修改默认格式化器；也可以在 settings.json 中分别写入 [javascript]、[css] 配置块。保存时格式化要另外开启 editor.formatOnSave。

假设同一个项目里有 JavaScript 和 CSS，希望两种文件使用各自的内置格式化器。下面只改项目级设置，不要求安装额外扩展。图中均为原创界面说明，菜单采用英文命令名便于搜索，中文界面可按对应译名操作；具体布局随版本与个人设置有所不同。

官方地址：https://code.visualstudio.com/

步骤一：打开项目设置并限定 JavaScript

先通过 File → Open Folder… 打开一个可编辑项目，再打开其中的 main.js。看右下角语言模式，应该显示 JavaScript；若是 Plain Text，点击该标识，选 JavaScript。文件的语言模式决定哪一组语言设置生效，单看扩展名还不够。

按 Ctrl+Shift+P（macOS 为 Cmd+Shift+P）打开命令面板，运行 Preferences: Open Workspace Settings。在设置面板确认选中 Workspace，搜索框输入 @lang:javascript default formatter。当前文档版本的设置界面可能以覆盖面板打开，也可能按用户设置显示为编辑器标签。

在 Editor: Default Formatter 下拉框选择内置的 TypeScript and JavaScript Language Features。此时应看到三个明确状态：Workspace 仍选中、搜索框仍有 JavaScript 语言过滤器、默认格式化器已切换。图形设置的修改会直接应用，不需要寻找额外的“应用”按钮。

这一判断能避免常见误操作：如果忘了语言过滤器，就可能把选择写成整个工作区的一般默认值；如果选了 User，则会影响该用户配置范围内的其他项目。本文统一采用单文件夹工作区，配置保存在项目的 .vscode/settings.json 中。

步骤二：分别保存 JavaScript 与 CSS 的默认格式化器

保持 JavaScript 过滤器，把搜索词改为 @lang:javascript format on save，勾选 Editor: Format On Save。这一步控制保存触发，不替代默认格式化器的选择。

接着把语言过滤器改为 @lang:css，先搜索 Default Formatter，选择 CSS Language Features；再搜索 Format On Save 并勾选。一次只放一个语言过滤器，避免把多个 @lang: 串在一起后误以为同时编辑两种语言。

想直接看到最终写入的配置，可通过命令面板运行 Preferences: Open Workspace Settings (JSON)。下例是完整的最小 JSONC 配置；已有文件时只合并对应字段，不要覆盖项目其他设置，也不要重复创建同名语言块。

{
  // JavaScript 使用内置语言服务格式化器，并在保存时触发
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features",
    "editor.formatOnSave": true
  },
  // CSS 独立选用 CSS 语言服务，不继承 JavaScript 的选择
  "[css]": {
    "editor.defaultFormatter": "vscode.css-language-features",
    "editor.formatOnSave": true
  }
}

settings.json 支持注释，因此这里的中文注释是合法 JSONC。若把配置迁移到严格 JSON 工具，应移除注释。字符串值是扩展标识符，不能用下拉框的显示名称替换；这里两个标识来自 VS Code 官方仓库中的内置扩展清单。

编辑 JSON 后按 Ctrl+S / Cmd+S 保存。预期状态是配置文件未保存标记消失，对应语言块下没有由拼写或结构错误引起的诊断。语言块分别独立后，还可给 CSS 单独设置缩进等编辑器选项，而不会因此改变 JavaScript 的默认格式化器。

步骤三：回到两个文件确认实际使用的格式化器

回到 main.js，右键编辑区选择 Format Document With…。如果菜单没有直接显示该项，可在命令面板搜索同名命令；进入 Configure Default Formatter… 时，应看到 JavaScript 内置格式化器为当前默认项。选择一次其他格式化器临时执行，与修改默认项是不同动作。

再打开 theme.css，确认右下角是 CSS，用同一路径查看默认项应是 CSS Language Features。用一段未整理的合法样例手动执行 Format Document，或修改文件后按保存快捷键，观察空格、换行和缩进是否被整理。本文没有实际运行软件，以下代码仅供读者自行操作。

// 用于观察 JavaScript 格式化器是否整理空格和对象布局
const notice={text:"ready",visible:true};

/* 用于观察 CSS 格式化器是否整理规则块换行与缩进 */
.notice{color:teal;padding:8px;}

确认结果时，不要仅以“代码发生变化”判断格式化器选对了。先看当前语言模式和默认项，再看保存触发是否生效。已经规范的代码可能完全没有可见变化；不同格式化器也可能对这段短样例给出相同排版。

设置了默认格式化器，为什么还提示不可用？

默认值只选择提供者，不会安装或启用它。打开扩展视图，搜索 @builtin，确认相应内置语言扩展未被禁用；在远程工作区还要确认当前环境里的提供者可用。语言服务的格式化开关关闭时，默认项本身也不能强行恢复服务，按当前版本对应设置检查。

为什么工作区配置没有覆盖用户设置？

先比较是否都属于同一语言。语言专属设置会覆盖普通编辑器设置，即使普通设置在更窄的范围中；同一语言在 User 和 Workspace 都配置时，工作区对应值优先。还要留意当前 Profile、多根工作区文件夹设置和管理员策略。不要简单地认为“Workspace 一定覆盖所有 User 值”。

JavaScript 生效了，JSX 或 TypeScript 为什么没有跟着变化？

它们的语言 ID 不同。[javascript] 不代表 [javascriptreact]、[typescript] 或 [typescriptreact]。需要独立策略时分别配置；为了让覆盖关系易懂，本例不把多种语言合成一个复合配置块。

保存后又被另一个工具改回去怎么办？

检查项目里的保存代码操作、扩展自己的格式化功能，以及外部监听任务。默认文档格式化器只控制相应格式化调用，不会自动禁用所有可能改写文件的工具。先保留一种明确的保存格式化入口，再按实际项目要求协调其他操作。

配置语义参见 VS Code 用户与工作区设置，操作参见 基本编辑与格式化；内置能力见 JavaScript 官方说明和 CSS 官方说明。正文场景、代码和界面说明图为原创。