首先确保安装Prettier插件，然后设置其为CSS默认格式化工具，接着开启保存时自动格式化功能，最后可选配置.prettierrc自定义规则，实现保存即排版。
VSCode 中配置保存时自动格式化 CSS 代码非常实用，能保持样式文件整洁统一。下面介绍完整设置流程，确保每次保存 CSS 文件时自动排版。
1. 确保已安装并启用 Prettier 或内置格式化工具
VSCode 支持多种格式化工具，推荐使用 Prettier，它对 CSS、SCSS、Less 等支持良好。
操作步骤：
- 打开 VSCode 扩展商店（快捷键 Ctrl+Shift+X）
- 搜索 “Prettier - Code formatter” 并安装
- 安装完成后无需手动启用，插件会自动生效
2. 设置默认格式化工具为 Prettier
告诉 VSCode 在格式化 CSS 时使用 Prettier 而不是默认工具。
立即学习“前端免费学习笔记（深入）”；
操作方法：
- 打开设置界面：点击左下角齿轮图标 → 选择“设置”
- 搜索 “default formatter”
- 找到 “Editor: Default Formatter” 设置项
- 点击下拉菜单，选择 esbenp.prettier-vscode
或者在 settings.json 中手动添加：
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}3. 开启保存时自动格式化
这是实现“保存即排版”的关键步骤。
操作方式一（通过图形界面）：
- 进入 VSCode 设置
- 搜索 “format on save”
- 勾选 Editor: Format On Save
操作方式二（修改 settings.json）：
按下 Ctrl+, 打开设置，再点击右上角的“打开设置 (JSON)”图标，添加以下内容：
"editor.formatOnSave": true
4. （可选）配置 Prettier 排版规则
如果想自定义 CSS 格式化风格，可在项目根目录创建 .prettierrc 文件：
{
"semi": false,
"trailingComma": "none",
"singleQuote": false,
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"bracketSpacing": true,
"arrowParens": "avoid"
}这些规则会影响 CSS 属性的换行、缩进等表现形式。
基本上就这些。完成上述设置后，每次保存 .css 文件时，VSCode 会自动使用 Prettier 进行格式化，代码立刻变得整齐规范。不复杂但容易忽略细节，关键是启用“保存时格式化”和指定正确的格式化器。
