通过配置VSCode的CSS › Format: Space Before/After Colon选项或使用Prettier插件结合cssWhitespaceSensitivity设置，可控制CSS中冒号前后空格，推荐配合Prettier实现统一格式。
在 VSCode 中格式化 CSS 代码时，控制属性名与冒号之间、以及冒号与属性值之间的空格，可以通过配置 format 相关选项来实现。VSCode 默认使用内置的 CSS 格式化工具（基于 Prettier 或 css-beautify），但原生支持有限。要精细控制冒号前后空格，推荐使用 Prettier 插件并进行自定义设置。
1. 使用 Prettier 控制冒号间距
VSCode 自带的格式化功能对 CSS 冒号空格的控制较弱，建议安装并配置 Prettier - Code formatter 插件，它提供更灵活的格式化规则。
操作步骤：- 在扩展商店搜索并安装 Prettier - Code formatter
- 安装完成后，在项目根目录创建或编辑 .prettierrc 文件
- 添加以下配置控制冒号前后空格：
{
"cssWhitespaceSensitivity": "strict",
"printWidth": 80,
"tabWidth": 2,
"semi": true,
"singleQuote": false,
"trailingComma": "es5"
}注意：Prettier 并没有直接叫“冒号空格”的选项，但通过 cssWhitespaceSensitivity 可间接影响格式。若需完全自定义，可结合以下方法。
2. 配置 VSCode 设置控制格式化行为
即使不使用 Prettier，也可以通过修改 VSCode 的默认格式化设置来调整 CSS 格式。
立即学习“前端免费学习笔记（深入）”；
操作方式：- 打开 VSCode 设置（文件 > 首选项 > 设置，或 Ctrl+,）
- 搜索 Format on Save，勾选以启用保存时自动格式化
- 搜索 CSS › Format: Space Around Selector Separator，确保开启空格控制
- 重点设置：
CSS › Format: Newline Between Rules：是否在规则间换行
CSS › Format: Space After Colon：控制冒号后是否加空格（关键选项）
CSS › Format: Space Before Colon：控制冒号前是否加空格
示例设置效果：
.example {
margin : top 10px; /* 冒号前后有空格，需开启对应选项 */
}关闭 Space After Colon 后会变成：color:red;
3. 使用 EditorConfig 统一团队格式
若多人协作，建议在项目中添加 .editorconfig 文件，统一格式规范。
示例内容：root = true <p>[*.css] indent_style = space indent_size = 2 trim_trailing_whitespace = true insert_final_newline = true
虽然 EditorConfig 不直接控制冒号空格，但能配合 Prettier 或 VSCode 设置保证一致性。
4. 替代方案：使用 stylefmt 或其他工具
如果 Prettier 和 VSCode 内置格式化无法满足需求，可尝试基于 stylelint + stylefmt 的组合，通过 CSS 语法树精确控制格式，包括冒号间距。
- 安装 stylelint 和 stylefmt
- 配置
stylelint.config.js规则 - 使用命令或插件运行格式化
这种方式适合对样式格式要求极高的项目。
基本上就这些。日常开发中，启用 VSCode 的 CSS › Format: Space After Colon 和搭配 Prettier 是最简单有效的方式。根据团队规范调整设置即可实现统一的冒号间距风格。
