首先安装Prettier插件并设为默认格式化工具，接着在settings.json中启用保存时自动格式化，推荐创建.prettierrc文件配置CSS格式规则，确保语言模式正确且无其他插件冲突，最后通过检查文件关联和忽略文件排除常见问题。
在 VS Code 中使用 Prettier 格式化 CSS 代码，需要正确配置插件和相关设置。以下是完整、清晰的配置教程，确保你的 CSS 代码能被 Prettier 正确格式化。
1. 安装 Prettier 插件
打开 VS Code，进入扩展市场（快捷键 Ctrl+Shift+X），搜索并安装：
- Prettier - Code formatter（由 Prettier 官方维护）
安装完成后，Prettier 即可作为默认格式化工具使用。
立即学习“前端免费学习笔记（深入）”；
2. 设置 Prettier 为默认格式化工具
为了让 VS Code 在格式化时自动使用 Prettier，需将其设为默认格式化程序：
- 右键编辑器中的 CSS 文件，选择“格式化文档时使用...”
- 选择 Prettier
- 勾选“设为默认”
或者手动修改 settings.json：
{
"editor.defaultFormatter": "esbenp.prettier-vscode"
}3. 配置保存时自动格式化
推荐开启保存时自动格式化，提升开发效率：
{
"editor.formatOnSave": true,
"editor.formatOnPaste": false,
"editor.formatOnType": false
}这样每次保存 CSS 文件时，Prettier 会自动格式化代码。
4. 创建 .prettierrc 配置文件（可选但推荐）
在项目根目录创建 .prettierrc 文件，自定义 CSS 格式规则：
{
"semi": false,
"trailingComma": "none",
"singleQuote": false,
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"bracketSpacing": true,
"arrowParens": "avoid",
"htmlWhitespaceSensitivity": "css"
}其中 htmlWhitespaceSensitivity: "css" 对 CSS 布局很重要，避免格式化破坏样式结构。
5. 确保 Prettier 支持 CSS 文件
Prettier 默认支持 CSS、SCSS、Less 等样式文件。如果你发现未生效，请检查：
- 文件语言模式是否为 CSS（右下角查看，可手动切换）
- 确认没有其他格式化插件（如 Beautify）冲突
- 在 settings.json 中明确指定 CSS 使用 Prettier：
{
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}6. 排查常见问题
如果格式化未生效，尝试以下步骤：
- 重启 VS Code
- 检查输出面板中 Prettier 是否报错（菜单：查看 → 输出 → 选择 Prettier）
- 确认项目中无 .prettierignore 忽略了 CSS 文件
- 全局或工作区设置中不要禁用 Prettier
基本上就这些。配置完成后，你的 CSS 代码在保存时就会被 Prettier 自动美化，保持团队代码风格统一。
