在 vscode 中开启保存时自动格式化代码的步骤如下：1. 安装格式化插件，如 prettier、eslint 或 black 等；2. 打开设置界面或编辑 settings.json 文件，启用 "editor.formatonsave": true；3. 若安装多个格式化工具，需通过右键菜单或 settings.json 指定默认格式化器；4. 可选配置包括仅格式化修改内容及关闭特定文件类型的自动格式化。完成以上步骤后，保存代码时将自动按规范排版，提升协作效率与代码整洁度。
在 VSCode 中，自动格式化代码是一个非常实用的功能，尤其是在团队协作或保持代码风格统一时。如果你希望在保存文件时自动格式化代码，只需简单配置即可实现。
安装必要的格式化插件
VSCode 本身支持基础的格式化功能，但要实现更专业的格式化（比如按项目规范来），通常需要安装对应的格式化工具或插件：
- Prettier：适用于 JavaScript、TypeScript、CSS、HTML 等
- ESLint：常用于 JavaScript/TypeScript 的 linting 和格式化
- Black：Python 的主流格式化工具
- 其他语言也有各自对应的格式化插件
以 Prettier 为例，在扩展商店搜索并安装后，它会自动识别大多数前端项目的结构，并提供格式化选项。
开启保存时自动格式化功能
接下来是关键步骤：让 VSCode 在你保存文件时自动格式化代码。
-
打开设置界面：
- 快捷键
Ctrl + ,（Windows/Linux）或Cmd + ,（Mac） - 或者点击左下角齿轮图标 → “Settings”
- 快捷键
搜索关键词：
format on save勾选“Editor: Format On Save”这个选项
或者，你可以直接编辑 settings.json 文件来手动添加配置：
{
"editor.formatOnSave": true
}这样设置之后，每次保存文件（快捷键 Ctrl+S 或 Cmd+S），VSCode 都会自动调用当前文件类型的格式化器进行排版。
设置默认格式化工具（避免冲突）
有些时候你可能安装了多个格式化插件（比如同时有 Prettier 和 ESLint），这时需要指定默认的格式化工具，否则可能会不生效或提示错误。
操作方式如下：
- 右键点击任意代码文件 → “Format Document With...”
- 弹出菜单中选择你希望使用的格式化器（如 Prettier）
- 勾选“Remember my preference”
也可以在 settings.json 中明确指定：
{
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}这样就能确保不同语言使用正确的格式化工具。
其他可选配置（提升体验）
除了保存时格式化，还有一些相关设置可以按需开启：
- 只格式化修改过的代码：避免整篇代码重排造成 Git Diff 太多改动
- 关闭保存时格式化的某些语言：例如 JSON 文件不想被自动格式化
示例配置：
{
"editor.formatOnSave": true,
"editor.formatOnSaveMode": "modifications", // 只格式化修改部分
"[json]": {
"editor.formatOnSave": false
}
}基本上就这些。设置好之后，写完代码随手一保存，代码就整洁多了。虽然看起来不复杂，但稍不注意也可能不起作用，尤其是格式化器没设对或冲突的时候。遇到问题可以先检查默认格式化器和保存触发是否都开启了。
