使用VSCode格式化CSS可通过内置功能或Prettier插件实现。1. 使用默认格式化功能：打开CSS文件，右键选择“格式化文档”或快捷键Shift+Alt+F，按提示选择内置工具。2. 安装Prettier插件：在扩展商店搜索并安装Prettier - Code formatter，重启编辑器后即可支持CSS、SCSS等文件的智能格式化。3. 设置Prettier为默认格式化工具：右键选择“格式化文档时使用…”并选Prettier，或在设置中将“CSS: Default Formatter”设为esbenp.prettier-vscode，建议开启“Format On Save”以实现保存时自动格式化。4. 配置.prettierrc自定义规则（可选）：在项目根目录创建.prettierrc文件，添加如缩进、引号等规则，影响所有支持语言的格式化效果。配置完成后，一键即可统一CSS代码风格。
在 VSCode 中格式化 CSS 代码非常简单，借助内置功能和扩展插件可以快速实现代码美化与统一风格。以下是详细的使用方法。
1. 使用默认格式化功能
VSCode 自带基础的代码格式化能力，支持 CSS 文件的自动排版。
- 打开一个 .css 文件
- 右键点击编辑器中的代码区域
- 选择 “格式化文档”（Format Document）
- 或使用快捷键：Shift + Alt + F（Windows / Linux），Shift + Option + F（Mac）
如果未设置默认格式化工具，VSCode 会提示你选择一个，此时可选择内置的 “Prettier” 或 “vscode-css-languageservice”。
2. 安装 Prettier 插件增强格式化效果
Prettier 是目前最流行的代码格式化工具，对 CSS 支持良好。
立即学习“前端免费学习笔记（深入）”；
- 进入 VSCode 扩展商店（左侧活动栏方块图标）
- 搜索 Prettier - Code formatter
- 点击安装
- 安装完成后重启编辑器
安装后，Prettier 会自动识别 CSS、SCSS、Less 等样式文件并提供更智能的格式化选项。
3. 设置 Prettier 为默认格式化工具
确保保存时自动使用 Prettier 格式化 CSS。
- 右键编辑器 → “格式化文档时使用…” → 选择 Prettier
- 或打开设置（Ctrl + ,），搜索 “Default Formatter”
- 将 “CSS: Default Formatter” 设置为 esbenp.prettier-vscode
- 可勾选 “Format On Save” 实现保存自动格式化
4. 配置 .prettierrc 自定义格式规则（可选）
若需自定义缩进、换行等规则，可在项目根目录创建配置文件。
- 新建文件名为 .prettierrc
- 添加如下内容示例：
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5"
}
这些规则会影响 CSS 和其他支持的语言格式化行为。
基本上就这些操作，配置一次后所有 CSS 文件都能一键美化。
