安装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 格式化规则：

立即学习“前端免费学习笔记（深入）”；

沉浸式翻译

沉浸式翻译：全网口碑炸裂的双语对照网页翻译插件

83

查看详情

{   "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 代码，提升开发效率。