VSCode自动保存和格式化需手动配置:设files.autoSave为afterDelay/onFocusChange,editor.formatOnSave为true,并为各语言配置defaultFormatter插件ID,否则即使安装Prettier/ESLint也不会生效。

VSCode 的自动保存和格式化不是开箱即用的“一键生效”功能,必须显式配置 editor.formatOnSave 和对应语言的 formatter,否则即使装了 Prettier 或 ESLint,保存时也完全不会触发格式化。
启用自动保存的三种模式怎么选
VSCode 的自动保存由 files.autoSave 控制,它有四个可选值,但实际常用只有三个:
-
off:默认值,不自动保存 —— 改动后必须手动Ctrl+S -
afterDelay:延迟保存(默认 1000ms),适合频繁打字又不想每敲一个字都写盘的场景 -
onFocusChange:切换编辑器标签或点击其他窗口时保存 —— 推荐给多人协作或 Git 提交前想确保文件已落盘的用户
不建议用 onWindowChange,它在 VSCode 窗口失焦(比如切到浏览器)时就保存,容易误触;也不推荐无脑设 afterDelay,某些大文件或慢磁盘下可能造成卡顿。
格式化只在保存时触发?检查这三项配置
仅开启 editor.formatOnSave 不够,还需确认以下三点是否同时满足:
-
editor.formatOnSave设为true - 当前打开的文件有对应语言支持的 formatter(例如 .js 文件需安装
esbenp.prettier-vscode或配置好eslint.format.enable) - 该语言未被
editor.formatOnSaveExclude或[javascript].formatOnSave这类语言专属覆盖规则禁用
常见错误:装了 Prettier 插件但没重启 VSCode,或配置了 "[typescript]": { "editor.formatOnSave": false } 却忘了删掉 —— 此时 .ts 文件无论怎么设置全局都无效。
不同语言要不同格式化工具?用 [language] 覆盖规则
项目常混用多种语言(如 Vue 里含 、、),需按语言块指定 formatter:
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
}
注意:editor.defaultFormatter 必须填插件 ID(不是名字),可在插件页右键「复制扩展 ID」获取;若某语言没配 defaultFormatter,即使 formatOnSave 为 true,保存时也会静默跳过格式化。
保存时格式化失败?先看输出面板里的 Format 日志
格式化无声失败很常见,别急着重装插件 —— 打开 VSCode 右下角状态栏的「输出」面板,从下拉菜单选 Format,里面会打印真实调用的命令、返回码和错误原因。典型线索包括:
-
Failed to load module 'prettier':工作区根目录没装prettier包(Prettier 插件默认优先用本地 node_modules) -
No formatter found for 'xxx':当前语言未注册 formatter,或插件没激活(比如只在 Remote-SSH 里装了插件,本地没装) -
Range formatting not supported:某些语言(如 YAML)不支持局部格式化,而你启用了editor.formatOnSaveMode的modifications模式
真正麻烦的是 formatter 自身逻辑冲突 —— 比如 Prettier 和 ESLint 同时启用且规则矛盾,这时 VSCode 通常会停在第一个报错的 formatter 上,后续不执行。得靠 output 面板日志定位到底是哪个环节断了。










