Plugin required disclaimer for Prettier section of the editor setup docs

[ardzero]

while trying to set up prettier with "prettier-plugin-tailwindcss" plugin, I faced an issue where the tailwind class sorting wasn't working .astro files but worked fine on .tsx files.

The issue turned out to be that because how "prettier-plugin-tailwindcss" behaves (it's required that it's the last plugin in tailwind config) the prettier-plugin-astro plugin needs to be installed
and the .prettierrc should look something like :

{
  "plugins": [
    "prettier-plugin-astro",
    "prettier-plugin-tailwindcss" // needs to be the last plugin in the array
  ],
  "overrides": [
    {
      "files": "*.astro",
      "options": {
        "parser": "astro"
      }
    }
  ]
}

The Docs for the use of Prettier with Astro mentions:
If you’re using the Astro VS Code Extension or the Astro language server within another editor, code formatting with Prettier is included."

but there's no mention that the prettier-plugin-astro would be required for .astro files when using the prettier tailwind plugin.

[ArmandPhilippot]

I haven't tested myself but based on what you said, it seems the plugin installation is needed from the moment a custom Prettier configuration file is created (what you do to add the Tailwind plugin). So, perhaps we could update this Prettier section with something like:

-To add support for formatting .astro files outside of the editor (e.g. CLI) or inside editors that don’t support our editor tooling, install [the official Astro Prettier plugin](https://github.com/withastro/prettier-plugin-astro).
+To add support for formatting .astro files outside of the editor (e.g. CLI), inside editors that don't support our editing tooling, or when you use a custom configuration file, install [the official Astro Prettier plugin](https://github.com/withastro/prettier-plugin-astro).

This might be a bit long, I'm not sure. But could a hint like this have helped?

[ardzero]

@ArmandPhilippot the prettier formatting still works even if there's a custom config present. so far from what I've seen from the prettier-tailwind plugin docs, it's only with the prettier-tailwind plugin that requires this. had a talk with Erika about this on discord. she was the one who pointed it out

[ArmandPhilippot]

Oh okay, so it's a special case. I didn't follow the Discord discussion. Thanks for the clarification! From that, right now, I'm not sure about the best location. If this happens only with Tailwind, it could also make sense to add a note in the Tailwind section (https://docs.astro.build/en/guides/styling/#tailwind) since the text in Editor setup is pretty generic.

In any case, since Tailwind is used by a lot of people, it seems useful to specify this somewhere. We'll think about how best to integrate this, thanks for reporting this issue!

[ArmandPhilippot]

We could update the sentence before the steps to include extending the configuration:

To extend the configuration or to add support for formatting `.astro` files outside of the editor (e.g. CLI) or inside editors that don’t support our editor tooling, install [the official Astro Prettier plugin](https://github.com/withastro/prettier-plugin-astro).

And maybe we could say something like this in step 2 below the code snippet.

If you need to add plugins, pay attention to their order. For example, if you use [Tailwind](https://docs.astro.build/en/guides/styling/#tailwind), `prettier-plugin-tailwindcss` must appear last in the `plugins` array.

[sarah11918]

Sounds like a straightforward and helpful change to make!

I'll add the appropriate help wanted labels and then would accept a PR that:

1. Updates Step 2 in the relevant section to something like:

   Create a .prettierrc configuration file (or .prettierrc.json, .prettierrc.mjs, or other supported formats) in the root of your project and add prettier-plugin-astro to it, and optionally, any other Prettier plugins for your project. These additional plugins may need to be listed in a specific order. For example, if you use Tailwind, prettier-plugin-tailwindcss must appear last in the plugins array.

   In this file, also manually specify the parser for Astro files.

2. Updates the existing code example of the config to be the one in the first message of this issue. (i.e. includes the additional line for "prettier-plugin-tailwindcss" // needs to be the last plugin in the array:

{
  "plugins": [
    "prettier-plugin-astro",
    "prettier-plugin-tailwindcss" // needs to be the last plugin in the array
  ],
  "overrides": [
    {
      "files": "*.astro",
      "options": {
        "parser": "astro"
      }
    }
  ]
}

Sound like a good plan?