2 replies

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

prettier

and

prettier-plugin-tailwindcss

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}

prettier-plugin-{astro,tailwindcss}

inside my

prettier.config.cjs

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

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

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...

TTC

Theo's Typesafe Cult•4y ago•

2 replies

Bozhidar

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

I have

prettier

prettier

and

prettier-plugin-tailwindcss

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}

prettier-plugin-{astro,tailwindcss}

inside my

prettier.config.cjs

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

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

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...

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

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

Similar Threads

Similar Threads

Similar Threads