Prettier格式化CSS代码教程

本文详解了 Prettier 自 v2.0 起对 CSS（含 SCSS、LESS）的原生支持机制与常见落地障碍：它并非“开箱即用”，而是严格依赖文件扩展名匹配、配置无冲突、路径未被忽略等前提；通过命令行验证识别、升级旧版本、排查 `.prettierignore` 和正确配置 VS Code 的语言绑定（尤其是 `[css]` 和 `[scss]` 的 formatter 委托），才能真正激活自动格式化；同时提醒读者，Prettier 仅专注代码结构美化（缩进、空行、括号、分号），不处理语义校验、属性重排或嵌套语法兼容性——这些需交由 stylelint、postcss 插件或专用扩展协同完成，帮你避开“执行无反应”“保存不生效”“格式反直觉”等高频坑。

为什么 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。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Prettier格式化CSS代码教程》文章吧，也可关注golang学习网公众号了解相关技术文章。