安装Prettier并设置保存时自动格式化，通过Shift+Alt+F快捷键一键美化css代码，提升开发效率与代码可读性。

在使用 vscode 编辑 CSS 文件时，快速格式化代码能显著提升开发效率和代码可读性。VSCode 本身支持通过快捷键和扩展实现一键美化 CSS 代码，以下是具体方法与实用技巧。

使用默认快捷键格式化 CSS

VSCode 内置了基础的格式化功能，只需简单操作即可完成：

• 打开需要格式化的 CSS 文件
• 全选代码（Ctrl + A）或只选中部分代码
• 按下 Shift + Alt + F（windows / linux）或 Shift + Option + F（mac）触发格式化

若未生效，可能是缺少格式化工具，需配置默认提供程序。

安装并设置 Prettier 增强格式化效果

Prettier 是目前最流行的代码格式化工具，对 CSS 支持良好：

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

• 在扩展市场搜索 “Prettier – Code formatter” 并安装
• 安装完成后，右键点击 CSS 文件选择“格式化文档”
• 或继续使用快捷键 Shift + Alt + F，系统会自动调用 Prettier

建议将 Prettier 设为默认格式化工具：右键文件 → “格式化文档时使用” → 选择 Prettier。

巧文书

巧文书是一款ai写标书、AI写方案的产品。通过自研的先进AI大模型，精准解析招标文件，智能生成投标内容。

61

查看详情

配置保存时自动格式化

避免手动触发，可设置保存时自动美化代码：

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

此后每次保存 CSS 文件，代码都会自动整理成规范格式。

自定义 CSS 格式化规则（Prettier 配置）

可在项目根目录添加 .prettierrc 文件来自定义样式规则：

{ “semi”: true, “trailingComma”: “es5”, “singleQuote”: false, “printWidth”: 80, “tabWidth”: 2, “cssEnableSemicolons”: true }

也可在 .prettierignore 中排除某些文件不被格式化。

基本上就这些。合理配置后，VSCode 能让 CSS 编写更整洁高效，无需手动调整缩进或换行。关键是装好 Prettier 并开启保存自动格式化，后续工作就轻松多了。