使用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 会自动将压缩代码转换为带缩进、换行、空格的标准格式
esbenp.prettier-vscode。
配置保存时自动格式化
避免每次手动格式化，可开启保存时自动美化代码。
- 打开 VSCode 设置（Ctrl + ,）
- 搜索 format on save
- 勾选 Editor: Format On Save
此后每次保存 CSS 文件，都会自动格式化为可读样式。
立即学习“前端免费学习笔记（深入）”；
使用 Beautify 插件作为替代方案
如果 Prettier 不满足需求，可尝试 Beautify 插件，它也支持 CSS 格式化。
处理无后缀或内联样式场景
有时压缩 CSS 在 HTML 内部或文件无 .css 后缀，VSCode 可能无法识别语言类型。
解决方法：- 点击 VSCode 右下角语言模式（如“纯文本”）
- 选择“配置为语言” → “CSS”
- 再执行格式化操作即可
基本上就这些。Prettier 配合“保存时格式化”是最推荐的方式，简单高效，长期受益。
