Prettier 格式化 CSS 代码方法详解

本文深入解析了 Prettier 自 v2.0 起对 CSS、SCSS 和 LESS 的原生支持机制，直击开发者常遇的“CSS 不格式化”痛点——从版本兼容性、文件扩展名匹配、.prettierignore 干扰到 VS Code 保存自动格式化的精准配置，手把手教你验证识别、排除陷阱；同时厘清 Prettier 在 CSS 领域的能力边界：它专注统一缩进、空行与语法结构美化，而非语义校验或声明重排，并提醒你避开 @media 换行、CSS-in-JS 未生效、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学习网公众号！