安装Prettier并设置保存时自动格式化，通过Shift+Alt+F快捷键一键美化CSS代码，提升开发效率与代码可读性。
在使用 VSCode 编辑 CSS 文件时，快速格式化代码能显著提升开发效率和代码可读性。VSCode 本身支持通过快捷键和扩展实现一键美化 CSS 代码，以下是具体方法与实用技巧。
使用默认快捷键格式化 CSS
VSCode 内置了基础的格式化功能，只需简单操作即可完成：
- 打开需要格式化的 CSS 文件
- 全选代码（Ctrl + A）或只选中部分代码
- 按下 Shift + Alt + F（Windows / Linux）或 Shift + Option + F（Mac）触发格式化
若未生效，可能是缺少格式化工具，需配置默认提供程序。
安装并设置 Prettier 增强格式化效果
Prettier 是目前最流行的代码格式化工具，对 CSS 支持良好：
立即学习“前端免费学习笔记（深入）”；
- 在扩展市场搜索 “Prettier - Code formatter” 并安装
- 安装完成后，右键点击 CSS 文件选择“格式化文档”
- 或继续使用快捷键 Shift + Alt + F，系统会自动调用 Prettier
建议将 Prettier 设为默认格式化工具：右键文件 → “格式化文档时使用” → 选择 Prettier。
配置保存时自动格式化
避免手动触发，可设置保存时自动美化代码：
- 打开 VSCode 设置（Ctrl + ,）
- 搜索 “format on save”
- 勾选 Editor: Format On Save
此后每次保存 CSS 文件，代码都会自动整理成规范格式。
自定义 CSS 格式化规则（Prettier 配置）
可在项目根目录添加 .prettierrc 文件来自定义样式规则：
{ "semi": true, "trailingComma": "es5", "singleQuote": false, "printWidth": 80, "tabWidth": 2, "cssEnableSemicolons": true }也可在 .prettierignore 中排除某些文件不被格式化。
基本上就这些。合理配置后，VSCode 能让 CSS 编写更整洁高效，无需手动调整缩进或换行。关键是装好 Prettier 并开启保存自动格式化，后续工作就轻松多了。
