VSCode与终端ESLint/Prettier Tailwind类排序不一致问题

问题现象 #

VSCode保存.tsx文件时，ESLint/Prettier会自动调整Tailwind CSS类的顺序，但终端执行ESLint检查时，却判定该排序错误，双方的类顺序存在冲突：

• VSCode保存后的类顺序：

className='grid [grid-column:1_/_span_2] [grid-row:1_/_span_2] [grid-template-columns:subgrid] [grid-template-rows:subgrid]'

• 终端认定的正确顺序：

className='grid [grid-template-columns:subgrid] [grid-template-rows:subgrid] [grid-column:1_/_span_2] [grid-row:1_/_span_2]'

终端给出的错误提示：

Replace `template-columns:subgrid]·[grid-template-rows:subgrid]·[grid-column:1_/_span_2]·[grid-row:1_/_span_2` with `column:1_/_span_2]·[grid-row:1_/_span_2]·[grid-template-columns:subgrid]·[grid-template-rows:subgrid`eslintprettier/prettier

当前环境信息 #

• 使用Yarn Workspace，根目录package.json工作区配置：

"workspaces": [
    "server",
    "shared",
    "web"
  ]

• VSCode设置：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.addMissingImports": true,
    "source.fixAll": true
  },
  "eslint.workingDirectories": [
    "./web",
    "."
  ]
}

解决步骤 #

1. 统一ESLint工作目录 #

VSCode的eslint.workingDirectories同时指定了./web和根目录，可能导致ESLint加载了不同目录下的冲突配置。修改VSCode设置，只指定子项目的工作目录：

{
  "eslint.workingDirectories": ["./web"]
}

同时，终端执行ESLint时，要确保和VSCode使用同一工作目录：要么进入web目录执行eslint .，要么在根目录用yarn workspace web eslint .。

2. 统一Prettier与Tailwind插件配置 #

Tailwind的类排序由prettier-plugin-tailwindcss控制，确保项目中只有一份统一的配置：
在根目录创建prettier.config.js，明确配置Tailwind插件：

module.exports = {
  plugins: [require('prettier-plugin-tailwindcss')],
  // 其他Prettier规则（如缩进、换行符等）
}

避免子目录单独创建Prettier配置，确保所有子项目继承根目录的规则。

3. 检查ESLint与Prettier的集成配置 #

检查根目录和web子目录的.eslintrc.js，确保prettier/prettier规则配置一致，且plugin:prettier/recommended扩展放在最后，让Prettier规则优先生效：

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:prettier/recommended'
  ],
  // 其他ESLint配置
}

4. 清除缓存并重启 #

• 终端执行yarn workspace web eslint --clear-cache清除ESLint缓存
• 重启VSCode，确保新配置生效

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