通过配置Prettier或VSCode内置工具实现CSS规范换行，推荐使用Prettier扩展并设置.printWidth、tabWidth等参数，确保每条声明独占一行，保存时自动格式化，提升代码可读性与团队一致性。
VSCode 中格式化 CSS 代码时实现规范换行，主要依赖于 Prettier 或内置的 CSS 格式化工具 的配置。通过调整设置，可以让 CSS 属性每行一个、自动换行并保持良好的可读性。
启用并配置 Prettier（推荐方式）
大多数开发者使用 Prettier 来统一代码风格。如果你希望 CSS 每条声明独占一行，可以按以下步骤设置：
- 安装 Prettier - Code formatter 扩展
- 在项目根目录创建或修改 .prettierrc 文件
- 添加如下配置：
注意：Prettier 默认就会将每个 CSS 声明放在单独一行，只要属性数量较多或超过 printWidth 限制，就会自动换行，符合多数团队规范。
设置 VSCode 默认格式化工具为 Prettier
确保保存文件时使用的是 Prettier 而非默认格式化器：
立即学习“前端免费学习笔记（深入）”；
- 打开 VSCode 设置（Ctrl + ,）
- 搜索 Default Formatter
- 选择 esbenp.prettier-vscode
- 勾选 Format On Save 实现保存自动格式化
调整 CSS 单独换行行为（使用 vscode 内置格式化）
如果不使用 Prettier，可调整 VSCode 自带的 CSS 格式化规则：
- 打开 settings.json
- 添加以下内容：
这些设置会让规则之间保留空行、控制间距，并尽量维持手动换行结构。但对“每个属性换行”的控制不如 Prettier 精确。
验证格式化效果
写一段 CSS 测试代码，例如：
.example { width: 100%; height: 50px; background: #fff; border: 1px solid #ddd; }保存后，Prettier 会自动格式化为：
.example { width: 100%; height: 50px; background: #fff; border: 1px solid #ddd; }这样就实现了清晰、规范的换行格式。
基本上就这些。使用 Prettier 是最稳定、跨团队一致的方式，配合 VSCode 设置后，CSS 代码会自动按规范换行，无需手动调整。不复杂但容易忽略细节。
