VS Code需显式指定格式化工具并配置保存时触发:先在“Format Document With...”中设默认格式器(如Prettier),再确保配置文件(.prettierrc等)位于项目正确路径,最后开启对应语言的editor.formatOnSave或codeActionsOnSave。

怎么让 VS Code 知道用哪个格式化工具
VS Code 不会自动猜你用 prettier 还是 eslint --fix,必须显式指定。默认情况下它可能选错(比如对 .js 文件用了 typescript 内置格式器),结果一保存就乱缩进或删掉空行。
- 打开命令面板(
Ctrl+Shift+P/Cmd+Shift+P),搜Format Document With...,选“Configure Default Formatter”,再选你实际装的扩展(如esbenp.prettier-vscode) - 这步只设文件类型级默认值,不是全局统一格式器——
.ts可以用typescript,.vue用prettier,互不干扰 - 如果没看到想选的格式器,说明对应扩展没启用,或没在当前工作区安装(尤其远程开发时,扩展需在远程端安装)
配置文件路径不生效?先看 VS Code 找哪几个地方
VS Code 不读你随便放的 .prettierrc,它按固定优先级从项目里找配置文件,顺序错了就 fallback 到内置默认值,导致本地配置像没写一样。
- 它先查当前打开的文件所在目录,再逐级往上找,直到根目录或遇到
package.json中有"prettier"字段为止 - 支持的配置文件名有:
.prettierrc、.prettierrc.json、.prettierrc.yaml、prettier.config.js(注意:不支持.prettierrc.js,少个dot就失效) -
package.json里写"prettier": { "semi": false }是合法的,但字段名必须严格是prettier,写成prettierConfig就被忽略
为什么保存时没触发格式化
光配对格式器和配置文件还不够,VS Code 默认关掉了“保存即格式化”,得手动开,而且这个开关是分语言的。
- 检查设置项:
editor.formatOnSave要为true;但更关键的是[javascript].editor.formatOnSave这类语言专属设置,可能被覆盖成false - 如果用了 ESLint + Prettier 混合方案,别直接开
editor.formatOnSave,容易冲突。推荐关掉它,改用editor.codeActionsOnSave配"source.fixAll.eslint"或"source.fixAll.prettier" - 某些格式器(如
prettier)要求文件有正确 language mode(右下角显示JavaScript而不是Plain Text),否则直接跳过
多根工作区下格式化路径容易搞混
当你用 code . 打开一个包含多个子项目的文件夹时,VS Code 会把每个子文件夹当一个“根”,而格式器只认自己所在根目录下的配置文件——跨根不继承。
- 比如工作区结构是
monorepo/packages/a/和monorepo/packages/b/,你在a里改了.prettierrc,b不会感知到 - 解决方案只有两个:把配置文件提到
monorepo/根目录(确保它能被所有子包向上找到),或者给每个子包单独配.prettierrc - 如果用
prettier.config.js,注意它的resolveConfig.sync()行为在多根下仍以当前文件路径为起点,不会自动跨根解析
.prettierrc 却忘了在设置里指定用 prettier,或者在多根工作区里只改了一个子目录的配置——这时候格式化表现不一致,不是 bug,是路径没对上。


















