首先安装Prettier扩展并设为默认格式化工具，然后开启保存时自动格式化功能，可通过settings.json配置"editor.formatOnSave": true及指定defaultFormatter，最后可选创建.prettierrc自定义规则，保存CSS文件即可自动美化代码。
在 VSCode 中配置保存时自动格式化 CSS 代码，可以极大提升开发效率。下面是一个清晰、实用的完整设置流程，确保你的 CSS 在每次保存时都能自动格式化。
1. 安装并启用 Prettier（推荐格式化工具）
Prettier 是目前最流行的代码格式化工具，支持 CSS、SCSS、Less 等样式语言。
- 打开 VSCode 扩展市场（快捷键 Ctrl+Shift+X）
- 搜索 Prettier - Code formatter
- 点击安装并重启编辑器（如有提示）
2. 设置 Prettier 为默认格式化工具
告诉 VSCode 在格式化时使用 Prettier 而不是内置格式化器。
立即学习“前端免费学习笔记（深入）”；
- 打开设置：菜单栏选择 文件 → 首选项 → 设置（或按 Ctrl+,）
- 搜索框输入 default formatter
- 找到 Editor: Default Formatter
- 选择 Prettier - Code formatter
3. 开启“保存时自动格式化”功能
这是实现“快捷格式化”的关键步骤。
- 在设置页面搜索 format on save
- 勾选 Editor: Format On Save
也可以通过修改 settings.json 文件来精确控制：
按下 Ctrl+Shift+P，输入 Preferences: Open Settings (JSON)，然后添加以下配置：
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}4. （可选）自定义 CSS 格式化规则
如果你希望调整缩进、引号、换行等风格，可以在项目根目录创建 .prettierrc 文件：
{
"semi": false,
"trailingComma": "none",
"singleQuote": false,
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"bracketSpacing": true,
"arrowParens": "avoid"
}这些规则会自动应用于 CSS、JS 等文件。
5. 验证配置是否生效
测试你的设置是否成功：
- 打开一个 CSS 文件
- 手动加一些乱格式，比如删除换行或空格
- 保存文件（Ctrl+S）
- 观察代码是否自动美化
如果没反应，检查右下角状态栏是否有 Prettier 提示，或查看输出面板中的 Prettier 日志。
基本上就这些。配置一次，长期受益。只要保存就能格式化，写 CSS 更清爽。
