VSCode 默认保持每行一个 CSS 属性，不会将多行压成一行；若出现压缩，通常是插件（如 Pretterr）或语言模式错误所致，且 Prettier 也不支持强制单行压缩。
VSCode 默认不会把多行 CSS 属性压成一行
VSCode 内置的 CSS 格式化器（vscode-css-languageservice）默认行为是「保持每行一个属性」，而不是合并。它甚至会把原本写在一行的长声明自动拆成多行——比如 color: red; margin: 0 1rem; padding: 2px; 可能被格式化为三行。所以如果你看到多行被“压成一行”，大概率不是 VSCode 干的，而是你装了某个插件（比如旧版 Auto Close Tag 或自定义脚本），或者误用了其他语言的格式化器（如把 .css 文件语言模式切成了 Plain Text 或 JavaScript）。
- 检查右下角状态栏：确认当前文件语言模式是
CSS（点击可切换），不是SCSS、Less或Plain Text - 打开命令面板（
Ctrl+Shift+P），输入Format Document With，看列出的格式化器是否含Built-in CSS formatter；若只有Prettier，那实际生效的是 Prettier 规则 - 临时禁用所有扩展，重启 VSCode，再试一次
Shift+Alt+F：如果此时不再“压成一行”，说明是某个扩展干扰了
想让 Prettier 把短 CSS 属性压成一行？它不支持
Prettier 的设计哲学是「确定性换行」，而非「按长度压缩」。它会根据 printWidth 和 AST 结构决定是否换行，但对单个 CSS 声明块（如 div { color: red; font-size: 14px; }）默认就倾向多行——即使整行才 40 字符。它没有类似 ESLint 的 max-len + single-line-if-short 这类开关。
-
printWidth: 80不代表“超过 80 才换行”，而是“尽量控制每行 ≤80，但换行位置由语法节点决定”，CSS 声明块几乎总是被拆开 - 没有配置项能强制
margin: 0; padding: 0;压成一行；改tabWidth或singleQuote也无效 - 如果你真需要这种风格，得换工具：比如用
stylelint+stylelint-declaration-block-no-redundant-longhand-properties类规则做 lint，但不负责格式化
手动压成一行的可靠方法：选中 + 替换
VSCode 没有“一键压缩 CSS 属性为单行”的原生命令，但可以用编辑器能力快速达成，且可控、无副作用。
- 选中目标声明块（如从
{到}之间的全部内容） - 按
Ctrl+H（Windows）或Cmd+H（Mac）打开替换面板 - 启用正则（点击
.*图标），查找：\s*;\s*\n\s*，替换为：;（分号+空格） - 再查：
\{\s*\n\s*|\s*\n\s*\}，分别替换成{和}（注意空格） - 最后按
Ctrl+K Ctrl+F（格式化选中范围）清理多余空格——这步可选，因替换后通常已干净
为什么别依赖“自动压行”？维护成本高
强行让 CSS 属性挤在一行，短期看着紧凑，长期会显著降低可读性和可维护性。尤其当属性增多、值变复杂（如 background: linear-gradient(...)）、或团队协作时，diff 会变得难以追踪。
- Git diff 中，修改一个属性却导致整行重排，掩盖真实变更
- 多人编辑同一选择器时，容易触发合并冲突（一行 vs 多行风格混用）
- VSCode 的 CSS 语言服务（用于悬停提示、错误检测）依赖标准换行结构，压成一行可能弱化语义分析
- 真正需要“紧凑输出”的场景（如内联样式、构建后压缩），应交给构建工具（
cssnano、esbuild）处理，而非编辑器
.prettierrc 和 .vscode/settings.json，让所有人保存即统一。 
