如何在VS Code中为CSS Modules配置Prettier 解决@apply格式化异常问题

问题根因 #

原生Prettier内置CSS解析器未兼容Tailwind的@apply自定义规则，会按照标准CSS属性逻辑处理@apply后的内容，因此会出现强制合并首行样式、自动追加末尾分号的问题。且你全局配置的semi: false仅作用于JS/TS类文件，CSS文件的分号控制需要单独使用cssSemi配置项。

解决方案1（推荐）：安装Tailwind官方Prettier插件 #

这是Tailwind官方推出的语法适配插件，可完美解决@apply规则的格式化异常问题：

• 安装依赖：
  npm install -D prettier-plugin-tailwindcss
• 修改你的.prettierrc配置，在原有配置基础上新增以下内容：

  {
    "plugins": ["prettier-plugin-tailwindcss"],
    "cssSemi": false,
    // 若需要@apply后的每个类名单独换行，可将printWidth调整为更小的数值（如30），超过长度后会自动换行
    "printWidth": 30
  }
  

配置完成后重启VS Code即可生效，插件会自动遵循你设定的格式规则处理所有CSS/Module CSS文件中的@apply语法。

解决方案2（局部规避）：添加Prettier忽略注释 #

如果不想安装额外插件，可在需要保留格式的@apply代码块上方添加忽略注释，Prettier会跳过该段代码的格式化：

.foo {
  /* prettier-ignore */
  @apply 
  border-2
  rounded
}

生效校验 #

配置完成后可重新打开module.css文件执行格式化，若仍未生效，可在VS Code的命令面板执行「Developer: Reload Window」重启编辑器，再确认CSS文件的默认格式化器已设置为Prettier。

内容的提问来源于stack exchange，提问作者grabury