1

After saving my .tsx file in VSCode, Eslint/Prettier changes the order of the Tailwind classes. However, when I run Eslint in my terminal, it shows this reordering as an error.

VSCode correct:

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

Terminal correct:

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

Error message:

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

How can I make sure VSCode and Terminal both agree on the same ESLint/Prettier configuration?

Here's my configuration:

  • Yarn Workspace:
  "workspaces": [
    "server",
    "shared",
    "web"
  ]
  • VSCode settings:
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.addMissingImports": true,
    "source.fixAll": true,
   },
   "eslint.workingDirectories": [
     "./web",
     ".",
   ]
}

0