首先安装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 文件来精确控制：

比格设计

比格设计是135编辑器旗下一款一站式、多场景、智能化的在线图片编辑器

124

查看详情

按下 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 更清爽。