安装Beautify插件并设置为默认格式化工具，创建.jsbeautifyrc配置CSS缩进、换行等规则，通过右键菜单或Shift+Alt+F快捷键格式化代码，确保无其他格式化插件冲突且文件语言模式正确。
在 VSCode 中使用 Beautify 插件格式化 CSS 代码，可以让你的样式文件更整洁易读。以下是配置和使用 Beautify 格式化 CSS 的详细步骤。
安装 Beautify 插件
打开 VSCode，进入扩展市场：
- 点击左侧活动栏的扩展图标（或按 Ctrl+Shift+X）
- 搜索 Beautify，作者是 HookyQR
- 点击“安装”按钮完成安装
配置默认格式化工具为 Beautify
确保 VSCode 在格式化时调用 Beautify 而不是内置格式化器：
- 打开设置（Ctrl+,）
- 搜索 default formatter
- 找到 “Editor: Default Formatter” 设置项
- 选择 HookyQR.beautify
创建 .jsbeautifyrc 配置文件（可选但推荐）
在项目根目录创建 .jsbeautifyrc 文件，用于自定义 CSS 格式化规则：
立即学习“前端免费学习笔记（深入）”；
{
"css": {
"indent_size": 2,
"indent_char": " ",
"selector_separator_newline": true,
"end_with_newline": true,
"newline_between_rules": true,
"preserve_newlines": true
}
}
说明：
- indent_size：缩进空格数
- selector_separator_newline：每个选择器独占一行
- newline_between_rules：规则之间添加空行
使用 Beautify 格式化 CSS
有以下几种方式触发格式化：
- 右键编辑器空白处 → 选择“Format Document With…” → 选择 “Beautify”
- 快捷键 Shift+Alt+F（Windows）或 Shift+Option+F（Mac）
- 命令面板：Ctrl+Shift+P → 输入 “Beautify” → 选择 “Beautify file”
如果已正确设置默认格式化工具，直接使用快捷键即可自动调用 Beautify。
常见问题处理
- 如果格式化无效，请检查是否与其他格式化插件冲突（如 Prettier），建议禁用其他格式化工具
- 确认文件语言模式是 CSS（右下角状态栏显示）
- 配置文件位置错误会导致设置不生效，请确保 .jsbeautifyrc 在项目根目录
基本上就这些。配置一次后，后续可以直接使用快捷键快速格式化 CSS 代码，提升开发效率。
