通过配置VSCode内置格式化选项或使用Prettier插件可有效去除CSS多余空格。首先调整css.format相关设置，如关闭选择器分隔符空格、减少换行等；其次推荐安装Prettier并配置.prettierrc文件，以严格规范空格和标点；最后在settings.json中指定默认格式化工具为Prettier，并启用保存时自动格式化、清除尾部空格等功能，从而实现CSS代码的紧凑整洁。
VSCode 格式化 CSS 代码时，去掉多余空格主要依赖于编辑器的格式化工具配置。默认情况下，VSCode 使用的是内置的 CSS 格式化引擎，也可以选择使用 Prettier 等第三方插件来更精细地控制格式化行为。
1. 使用 VSCode 内置格式化工具优化 CSS 空格
VSCode 自带的 CSS 格式化器支持部分空格控制，可以通过以下设置减少不必要的空格：打开设置（Ctrl + ,），搜索 css.format，调整以下选项：
-
Format: Space Around Selector Separator：设为
false可去除选择器分隔符（如>,+）周围的多余空格 -
Format: Newline Between Rules：设为
false可减少规则间的换行，压缩整体空白 -
Format: Preserve New Lines：设为
false可让格式化器自动清理多余的换行和空格
这些设置能一定程度上减少冗余空白，但对属性值内部或声明内的空格控制较弱。
2. 使用 Prettier 实现更严格的空格清理
若需彻底清除 CSS 中的多余空格（如属性冒号后多余空格、选择器前后空格等），推荐使用 Prettier 插件。安装步骤：
立即学习“前端免费学习笔记（深入）”；
- 在扩展商店搜索并安装 Prettier - Code formatter
- 在项目根目录创建
.prettierrc文件，添加如下配置：
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": true,
"singleQuote": false,
"printWidth": 80,
"useTabs": false,
"bracketSpacing": true,
"arrowParens": "avoid",
"endOfLine": "lf"
}Prettier 默认会压缩 CSS 中不必要的空格，例如：
- 移除属性冒号前后的多余空格（
color : red→color: red） - 规范选择器与大括号之间的空格
- 合并连续空白行为单个换行（可配置）
保存文件时自动格式化，确保代码整洁。
3. 配合 Settings.json 进一步控制格式化行为
在用户或工作区的settings.json 中添加以下内容，强化格式化效果：{
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true,
"editor.trimAutoWhitespace": true,
"files.trimTrailingWhitespace": true
}关键说明：
- editor.trimAutoWhitespace：删除行尾自动产生的空格
- files.trimTrailingWhitespace：保存时清除每行末尾的空格
- 指定 CSS 使用 Prettier 作为默认格式化工具，避免冲突
基本上就这些。通过合理配置 VSCode 内建选项或结合 Prettier，可以有效清除 CSS 中的多余空格，保持代码紧凑整洁。不复杂但容易忽略细节。
