使用Prettier格式化css代码可恢复可读性，安装Prettier扩展后右键选择“格式化文档”或使用快捷键Shift+Alt+F，配合“保存时自动格式化”功能提升效率。

vscode 中格式化压缩过的 CSS 代码，使其恢复可读性，可以通过内置功能或安装扩展来实现。压缩的 CSS 通常是一行显示、缺少空格与换行，不利于阅读和调试。下面介绍几种实用方法。

使用 Prettier 格式化 CSS

Prettier 是 VSCode 中最常用的代码格式化工具，支持 CSS、scss、less 等样式语言。

操作步骤：

• 在 VSCode 扩展市场中搜索并安装 Prettier – Code formatter
• 打开被压缩的 CSS 文件
• 右键点击编辑器，选择“格式化文档”（或使用快捷键 Shift + Alt + F）
• Prettier 会自动将压缩代码转换为带缩进、换行、空格的标准格式

提示：若未生效，请确认 Prettier 已设为默认格式化工具。可在设置中搜索“default Formatter”，将其设为 esbenp.prettier-vscode。

配置保存时自动格式化

避免每次手动格式化，可开启保存时自动美化代码。

• 打开 VSCode 设置（Ctrl + ,）
• 搜索 format on save
• 勾选 Editor: Format On Save

此后每次保存 CSS 文件，都会自动格式化为可读样式。

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

比格设计

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

124

查看详情

使用 Beautify 插件作为替代方案

如果 Prettier 不满足需求，可尝试 Beautify 插件，它也支持 CSS 格式化。

• 安装扩展：Beautify by HookyQR
• 右键 -> “Beautify” 即可恢复代码结构
• 可通过配置文件（.jsbeautifyrc）自定义缩进、换行等规则

处理无后缀或内联样式场景

有时压缩 CSS 在 html 内部或文件无 .css 后缀，VSCode 可能无法识别语言类型。

解决方法：

• 点击 VSCode 右下角语言模式（如“纯文本”）
• 选择“配置为语言” → “CSS”
• 再执行格式化操作即可

基本上就这些。Prettier 配合“保存时格式化”是最推荐的方式，简单高效，长期受益。