首先确保安装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. 开启保存时自动格式化

这是实现“保存即排版”的关键步骤。

简篇AI排版

ai排版工具，上传图文素材，秒出专业效果！

554

查看详情

操作方式一（通过图形界面）：

• 进入 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 进行格式化，代码立刻变得整齐规范。不复杂但容易忽略细节，关键是启用“保存时格式化”和指定正确的格式化器。