VSCode保存时prettier-plugin-tailwindcss不生效问题求助

以下是针对性的排查和解决步骤：

• 确认VSCode调用的是项目本地Prettier
  打开VSCode设置，搜索prettier.packageManager，设置为你当前用的包管理器（npm/yarn/pnpm）。全局Prettier不会加载项目本地的prettier-plugin-tailwindcss，必须让编辑器调用node_modules里的本地版本。

• 把Prettier设为对应文件的默认格式化器
  打开VSCode设置，搜索editor.defaultFormatter，将其设置为esbenp.prettier-vscode。如果你的HTML文件用了其他默认格式化工具，会直接跳过Prettier，自然不会触发Tailwind类排序。

• 检查.prettierrc.json的插件配置
  确保配置文件里明确声明了插件，格式如下：

  {
    "plugins": ["prettier-plugin-tailwindcss"]
  }
  

  可以通过VSCode的Prettier输出面板（按Ctrl+Shift+U，选择Prettier）查看日志，确认插件是否被成功加载。

• 排查配置文件冲突
  项目里如果同时存在.prettierrc.js、package.json中的prettier字段，可能会覆盖.prettierrc.json的设置。确保只有一份有效的Prettier配置，且插件声明正确。

• 重启VSCode或刷新窗口
  编辑器缓存可能导致插件不加载，完全关闭VSCode后重新打开，或者按Ctrl+Shift+P执行Developer: Reload Window强制刷新。

• 确认文件类型被Prettier关联
  检查VSCode设置中的prettier.documentSelectors，确保包含html类型，示例配置：

  "prettier.documentSelectors": ["**/*.html"]
  

额外验证手段 #

手动选中代码，按Ctrl+Shift+P执行Format Document With...并选择Prettier，如果此时类名能正常排序，但保存时不行，说明是保存触发的格式化配置有问题：

• 确认editor.formatOnSave已在全局或工作区启用
• 检查editor.formatOnSaveMode是否设为file，如果是modifications，只会格式化修改的部分，未改动的类名不会触发排序。

内容的提问来源于stack exchange，提问作者Adrian Gaile Singh