使用Prettier插件可实现CSS括号对齐与代码美化，通过配置.bracketSpacing等规则统一格式，结合VSCode内置设置与Beautify或Stylelint增强控制，确保团队代码风格一致。
VSCode 默认的 CSS 格式化功能不会自动对齐括号（如 {}），但通过配置合适的插件和设置，可以实现美观、对齐、结构清晰的 CSS 代码格式。下面介绍几种实用方法，帮助你在 VSCode 中实现 CSS 括号对齐与整体美化。
使用 Prettier 插件进行代码美化
Prettier 是目前最流行的代码格式化工具之一，支持 CSS、SCSS、Less 等样式语言，并能统一括号位置、空格、换行等格式。
操作步骤：- 在 VSCode 扩展市场中搜索并安装 Prettier - Code formatter
- 安装完成后，在项目根目录创建 .prettierrc 文件，配置格式规则，例如：
{
"semi": true,
"trailingComma": "es5",
"tabWidth": 2,
"bracketSpacing": true,
"printWidth": 80,
"arrowParens": "avoid"
}
- 保存 CSS 文件时，Prettier 会自动格式化代码，确保括号前后间距一致、结构清晰
- 可通过右键选择“Format Document With…” 并设为默认格式化工具
配置 VSCode 默认格式化选项
即使不使用插件，也可以通过调整内置设置提升 CSS 格式可读性。
- 打开 VSCode 设置（Ctrl + ,）
- 搜索 CSS › Format: Newline Between Rules，勾选此项可在每个样式规则间添加换行，提升可读性
- 启用 CSS › Format: Space Around Selector Separator 可控制选择器分隔符周围的空格
- 这些设置虽不能“对齐”括号成列，但能让 { 和 } 在视觉上更规整
结合 Beautify 或 Stylelint 增强格式控制
如果你希望有更多定制化选项，比如强制某种括号换行风格，可搭配其他工具。
立即学习“前端免费学习笔记（深入）”；
- 安装 Beautify 插件，支持 cssbeautify 配置，可在 .jsbeautifyrc 中定义缩进、换行方式
- 或使用 Stylelint 配合自动修复功能，确保团队代码风格统一
- 例如设置块级结构始终换行，让左括号独占一行，形成视觉对齐效果
基本上就这些。虽然 VSCode 本身不支持像表格一样“对齐”括号字符，但通过 Prettier 这类工具统一格式后，CSS 的括号位置、缩进、间距都会变得整齐美观。关键是选择一个适合团队的格式规范，并全局应用。不复杂但容易忽略的是：记得将格式化设置同步到项目中，避免不同人格式混乱。基本上就这些。
