Prettier v2.0+原生支持CSS，但需扩展名匹配且未被忽略或覆盖；执行npx prettier --parser css --check可验证识别。
为什么 Prettier 默认不格式化 CSS？
Prettier 对 CSS 的支持取决于你使用的版本和配置方式。v2.0 之后的 Prettier 原生支持 .css、.scss、.less，但前提是：文件扩展名必须明确匹配，且未被其他插件（如 ESLint 的 prettier/prettier 规则）错误覆盖或禁用。常见现象是执行 npx prettier --write src/*.css 没反应——大概率是因为 Prettier 没识别出这些文件为 CSS 类型，或者项目里有 .prettierignore 把它们排除了。
如何确认 Prettier 正确识别并处理 CSS 文件？
运行以下命令检查 Prettier 是否能解析你的 CSS 文件：
npx prettier --parser css --check "src/**/*.css"
如果报错 Invalid parser: "css"，说明你用的是极老版本（npm install --save-dev prettier@latest。若提示 “No matching files”，检查路径是否正确，或是否被 .prettierignore 屏蔽（例如写了 **/*.css 或 src/）。Prettier 默认只处理它“认得”的扩展名，所以确保文件后缀是 .css、.scss 等，而不是 .styl 或自定义后缀（后者需手动指定 --parser）。
如何在 VS Code 中让保存时自动格式化 CSS？
VS Code 默认不启用 Prettier 的 CSS 格式化，即使插件已安装。你需要显式配置语言绑定：
立即学习“前端免费学习笔记（深入）”；
- 打开设置（
Cmd+,或Ctrl+,），搜索format on save，确保勾选 - 搜索
default formatter，找到Editor: Default Formatter，点击右侧“在 settings.json 中编辑” - 添加或确认包含以下内容：
"css.format.enable": true,
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}注意："css.format.enable" 是 VS Code 内置 CSS 扩展的开关，和 Prettier 无关；真正起作用的是 "[css]" 块——它把 CSS 语言模式的格式化委托给 Prettier 插件。漏掉这一项，保存时不会触发 Prettier。
CSS 格式化效果与常见陷阱
Prettier 对 CSS 的控制粒度比 JS 小：它不调整选择器顺序、不重排声明（如把 margin 挪到 padding 前），也不支持按属性分组。它的核心动作是统一缩进、空行、括号位置和分号结尾。容易踩的坑包括：
-
@media查询内嵌套规则时，Prettier 会强制换行，可能破坏你习惯的紧凑写法 - 使用 CSS-in-JS（如
styled-components）时，Prettier 默认不处理模板字符串里的 CSS，需额外配置prettier-plugin-styled-components - PostCSS 插件（如
postcss-nested）生成的嵌套语法，Prettier 可能误判为非法，需在.prettierrc中加"parser": "postcss" - 某些 CSS 自定义属性（如
--my-var: calc(100vh - var(--header-height));）中空格位置会被重排，不影响运行但可能干扰人工 review
最常被忽略的一点：Prettier 不校验 CSS 语法合法性，只做结构美化。写错的 disply: flex 它照常格式化，不会报错——那得靠 stylelint。
