Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Plugin required disclaimer for Prettier section of the editor setup docs #10877

Open
ardzero opened this issue Feb 4, 2025 · 3 comments
Open
Labels
improve or update documentation Enhance / update existing documentation (e.g. add example, improve description, update for changes)

Comments

@ardzero
Copy link
Contributor

ardzero commented Feb 4, 2025

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
Copy link
Member

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?

@ArmandPhilippot ArmandPhilippot added the improve or update documentation Enhance / update existing documentation (e.g. add example, improve description, update for changes) label Feb 5, 2025
@ardzero
Copy link
Contributor Author

ardzero commented Feb 5, 2025

@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
Copy link
Member

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
improve or update documentation Enhance / update existing documentation (e.g. add example, improve description, update for changes)
Projects
None yet
Development

No branches or pull requests

2 participants