VSCode内置CSS格式化器能力弱，因仅支持基础缩进换行，无配置文件、不支持语义校验、无法版本化规则，导致团队协作时格式结果不一致；必须用Prettier配合项目级.prettierrc文件实现跨编辑器、可复现的统一规范。
VSCode 默认的 CSS 格式化能力很弱，不建议直接用内置格式化器处理团队项目中的 CSS；真正可靠、可共享、可复现的规范标准只有 Prettier + 项目级 .prettierrc 配置。
为什么不能依赖 VSCode 内置 CSS 格式化器
VSCode 自带的 vscode-css-languageservice 只做基础缩进和换行，不处理属性顺序、空格位置、分号策略等关键风格点。它没有配置文件，规则无法版本化，也不支持保存时自动修复。多人协作时，同一份 CSS 文件在不同人电脑上格式化结果可能完全不同。
- 不识别
/* prettier-ignore */注释，无法跳过特定块 - 对嵌套语法（如 SCSS 中的
&）、变量插值（如#{{ color }}）容易误拆行或加多余空格 - 无法与 ESLint/Stylelint 联动，缺失语义校验能力
必须用 Prettier 并配 .prettierrc 文件
Prettier 是目前唯一被广泛验证、跨编辑器、有稳定配置体系的 CSS 格式化标准。它不让你“选规则”，而是强制执行一套最小争议的共识规范 —— 但你可以通过 .prettierrc 调整其中几个关键开关。
- 创建
.prettierrc（JSON 格式）放在项目根目录，内容示例：
{
"tabWidth": 2,
"printWidth": 120,
"semi": false,
"singleQuote": true,
"bracketSpacing": true
}-
printWidth建议设为120：CSS 属性值常含长颜色函数或渐变，80容易把一行硬折成三四行，破坏可读性 -
semi设为false：CSS 不需要分号结尾（仅声明末尾有分号，规则体外无分号），设true会多加冗余 - 不要在
settings.json里覆盖这些字段：VSCode 设置优先级低于.prettierrc，混用会导致本地格式化和 CI 检查结果不一致
遇到模板语法（如 #{{ var }}）格式错乱怎么办
这是 Prettier 解析器把双大括号当成 JS 插值导致的 —— 它默认按纯 CSS 处理，但你的文件实际是预编译模板（如 Vue SFC、小程序 WXSS、或自定义构建流程）。
立即学习“前端免费学习笔记（深入）”；
- 最稳妥做法：在该 CSS 块上方加注释
/* prettier-ignore */，阻止 Prettier 触碰这一段 - 如果全文件都是模板语法，考虑禁用 Prettier 对该后缀的处理：
"prettier.disableLanguages": ["css"]，改用更贴合的工具（如stylelint+ 自定义插件） - 不要调大
printWidth来“治标”：这会让所有其他 CSS 行都变宽，牺牲整体一致性
团队项目必须提交 .prettierrc 到 Git
只装插件、只配 VSCode 设置，等于没配。Prettier 的规则只有落到 .prettierrc 文件里，才能被 prettier --check、CI 流水线、其他同事的编辑器共同识别。
- 别用
.prettierrc.js或.prettierrc.cjs：虽然支持，但 Node 环境依赖增加复杂度，JSON 最通用、零兼容问题 - 搭配
.prettierignore：排除node_modules/、构建产物目录、第三方 CSS 库（如normalize.css） - 注意
prettier.requireConfig: true这个 VSCode 设置：开启后，没有.prettierrc就不格式化，能避免“本地有配置、CI 没配置”的漏检
真正难的不是怎么装插件，而是让所有人——包括新入职同事、临时参与的外包、甚至 CI 服务器——看到同一份 CSS 格式化结果。这个一致性只靠一个文本文件就能锁死，别绕开它。
