TTC
Theo's Typesafe Cult•3y ago
Bozhidar

Astro extension doesn't use `prettier-plugin-tailwindcss` when formatting

Ran into a weird issue when setting up automatic Tailwind class sorting inside a pnpm-based Astro project. I tried to resolve it, but I was unable to find a solution myself; could anyone point me in the right direction, please 🥺 I have prettier and prettier-plugin-tailwindcss installed as devDependencies: 
{
  "devDependencies": {
    "prettier": "^2.8.4",
    "prettier-plugin-tailwindcss": "^0.2.4"
  }
}
{
  "devDependencies": {
    "prettier": "^2.8.4",
    "prettier-plugin-tailwindcss": "^0.2.4"
  }
}

I am using prettier-plugin-{astro,tailwindcss} inside my prettier.config.cjs, configured as the docs (https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins) say: 
{
  plugins: [
    require.resolve("prettier-plugin-astro"),
    require.resolve("prettier-plugin-tailwindcss"), // last
  ],
  pluginSearchDirs: false,
}
{
  plugins: [
    require.resolve("prettier-plugin-astro"),
    require.resolve("prettier-plugin-tailwindcss"), // last
  ],
  pluginSearchDirs: false,
}
And formatting with Prettier CLI works: 
$ pnpm exec prettier --write src/pages/foo.astro
$ pnpm exec prettier --write src/pages/foo.astro
However, when I format the code inside VSCode using the Astro extension, it only pretty prints the code, but doesn't sort Tailwind classes. I can't use the Prettier extension as a formatter, because it cannot format 'Astro'-files. This is a big annoyance, since I'm used to classes auto sorting on save, so it's painful having to run prettier in a terminal. Is this a configuration problem, or is it an issue with the Astro extension?
GitHub
GitHub - tailwindlabs/prettier-plugin-tailwindcss: A Prettier plugi...
A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order. - GitHub - tailwindlabs/prettier-plugin-tailwindcss: A Prettier plugin for Tailwind CSS tha...
2 Replies
Matvey
Matvey•3y ago
I had the same problem, but managed to fix it here https://github.com/ronanru/blog/blob/master/prettier.config.cjs
GitHub
blog/prettier.config.cjs at master · ronanru/blog
Contribute to ronanru/blog development by creating an account on GitHub.
Bozhidar
BozhidarOP•3y ago
Thankss a lot, that solved the problem for me as well! It appears as if the pluginSearchDirs: ["."] was the solution. Not sure if it's Astro VSCode's fault for not finding the plugin, should we maybe open an issue to polish this part of the DX?

Did you find this page helpful?