通过配置Prettier或vscode内置工具实现css规范换行，推荐使用Prettier扩展并设置.printWidth、tabWidth等参数，确保每条声明独占一行，保存时自动格式化，提升代码可读性与团队一致性。

VSCode 中格式化 CSS 代码时实现规范换行，主要依赖于 Prettier 或内置的 CSS 格式化工具 的配置。通过调整设置，可以让 CSS 属性每行一个、自动换行并保持良好的可读性。

启用并配置 Prettier（推荐方式）

大多数开发者使用 Prettier 来统一代码风格。如果你希望 CSS 每条声明独占一行，可以按以下步骤设置：

• 安装 Prettier – Code formatter 扩展
• 在项目根目录创建或修改 .prettierrc 文件
• 添加如下配置：

{ “printWidth”: 80, “tabWidth”: 2, “semi”: true, “singleQuote”: false, “trailingComma”: “es5”, “bracketSpacing”: true, “arrowParens”: “avoid”, “htmlWhitespaceSensitivity”: “css“, “endOfLine”: “auto” }

注意：Prettier 默认就会将每个 CSS 声明放在单独一行，只要属性数量较多或超过 printWidth 限制，就会自动换行，符合多数团队规范。

设置 VSCode 默认格式化工具为 Prettier

确保保存文件时使用的是 Prettier 而非默认格式化器：

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

• 打开 VSCode 设置（Ctrl + ,）
• 搜索 default Formatter
• 选择 esbenp.prettier-vscode
• 勾选 Format On Save 实现保存自动格式化

调整 CSS 单独换行行为（使用 vscode 内置格式化）

如果不使用 Prettier，可调整 VSCode 自带的 CSS 格式化规则：

代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

51

查看详情

• 打开 settings.json
• 添加以下内容：

“css.format.newlineBetweenRules”: true, “css.format.spaceAroundSelectorSeparator”: false, “css.format.preserveNewLines”: true

这些设置会让规则之间保留空行、控制间距，并尽量维持手动换行结构。但对“每个属性换行”的控制不如 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 代码会自动按规范换行，无需手动调整。不复杂但容易忽略细节。