答案是配置Prettier扩展并启用保存时自动格式化。首先安装Prettier扩展，然后在settings.json中设置CSS、SCSS、LESS文件的默认格式化器为Prettier，并开启"editor.formatOnSave": true，实现保存时自动美化CSS代码，提升开发效率与团队协作一致性。
VSCode美化CSS格式，核心在于利用其内置功能和强大的扩展生态。你只需要简单配置，就能让CSS代码在保存时自动对齐、统一风格，甚至检查潜在的错误，极大地提升开发效率和代码可读性。
其实要让VSCode把CSS搞得漂漂亮亮，我们有几种路径。最直接的是用它自带的格式化功能，或者引入一些流行的扩展。
VSCode本身就带了一个基础的HTML/CSS格式化器。你可以选中代码，然后按
Shift + Alt + F(Windows/Linux) 或
Shift + Option + F(macOS) 来手动格式化。但谁愿意每次都手动按呢？我们追求的是自动化。
所以，通常我会推荐引入像 Prettier 这样的格式化扩展。Prettier几乎是前端开发的标配了，它不仅能格式化CSS，还能搞定JavaScript、HTML、JSON等等。
立即学习“前端免费学习笔记（深入）”；
安装 Prettier 扩展：
- 打开 VSCode。
- 进入扩展视图（
Ctrl+Shift+X
）。 - 搜索 "Prettier - Code formatter" 并安装。
安装之后，你还需要告诉VSCode，对CSS文件，默认用Prettier来格式化。 在
settings.json中添加（或者通过设置UI搜索）：
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}这基本上就搞定了基础设置。
更进一步，我们肯定希望保存的时候就自动格式化。 在
settings.json中添加：
"editor.formatOnSave": true
这样，每次你保存CSS文件时，Prettier就会自动帮你把代码格式化好。这简直是解放双手，尤其是在团队协作时，能有效避免不同人不同风格的“代码战争”。
除了Prettier，还有一些专门针对CSS的格式化工具，比如 Stylelint。Stylelint更多的是一个Linter，它能检查CSS代码的规范性，比如有没有重复的属性，或者某个属性值是不是符合我们定义的规则。它和Prettier是互补的，Prettier负责“美化”，Stylelint负责“检查”。
安装 Stylelint 扩展：
- 打开 VSCode。
- 进入扩展视图。
- 搜索 "Stylelint" 并安装。
Stylelint通常需要一个
.stylelintrc配置文件来定义规则，这部分会稍微复杂一点，但对于追求极致规范的团队来说，投入是值得的。
// 示例 .stylelintrc.json
{
"extends": "stylelint-config-standard",
"rules": {
"indentation": 2,
"color-hex-case": "lower",
"selector-pseudo-class-no-unknown": [
true,
{
"ignorePseudoClasses": ["global"]
}
]
}
}这只是个非常基础的例子，实际项目中规则会更多样。
如何在VSCode中设置CSS代码保存时自动格式化？
说实话，每次手动格式化代码，时间一长真的会让人抓狂，效率也上不去。所以，让VSCode在保存文件时自动完成CSS格式化，几乎是我配置新开发环境时的第一步。这不仅省心，还能确保代码风格的一致性，尤其是在团队项目里，这太重要了。
要实现这个，核心就是两个VSCode设置项：
editor.formatOnSave和
editor.defaultFormatter。
-
开启保存时格式化： 打开VSCode的设置（
Ctrl+,
或者通过菜单文件 > 首选项 > 设置
）。在搜索框里输入format on save
，然后勾选Editor: Format On Save
这个选项。 如果你更喜欢直接编辑settings.json
文件，可以添加或修改这行："editor.formatOnSave": true
这告诉VSCode，只要文件一保存，就执行格式化操作。
-
指定CSS文件的默认格式化器： 光开启了保存格式化还不够，VSCode得知道用哪个工具来格式化CSS。虽然VSCode内置了一些格式化能力，但通常我们会选择更强大的扩展，比如前面提到的 Prettier。
假设你已经安装了 Prettier 扩展（如果没装，去扩展市场搜索 "Prettier - Code formatter" 安装一下）。接下来，我们需要明确告诉VSCode，对于CSS文件，请用Prettier来处理。
在
settings.json
中，你可以这样配置："editor.defaultFormatter": "esbenp.prettier-vscode", // 全局默认，推荐设置 "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[scss]": { // 如果你也写SCSS "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[less]": { // 如果你也写LESS "editor.
