💡 RFC: Add prettier plugin to VSCode extension

[FredKSchott]

• A few people (including myself, embarassingly) didn't realize that there was a prettier plugin for Astro files
• Reading up on Svelte's support, it looks like they bundle their formatter in with their VSCode extension
• see: https://github.com/sveltejs/language-tools/tree/master/packages/svelte-vscode

We should look into doing this ourselves! Almost all Astro users use the VSCode extension, so format-on-save should then be enabled by default.

[Princesseuh]

It'd be great to make a list of the improvements needed for the Prettier plugin to be included in the extension. I think that it would both benefits the people working on the Prettier plugin and the people working on the VS Code extension (that's us!)

Since this issue (and this one which is kinda a duplicate), the prettier plugin has improved a lot and some Astro users now use it everyday for their projects without encountering (much) issues (including me!)

The plugin's repo currently doesn't have many issues which of course, doesn't necessarily indicate that there isn't many issues with the plugin itself, but perhaps that just not many people know about it, after all, we get the question relatively often on Discord. I'm thinking that we could some sort of announcement or tweet or something to try to fish out beta testers maybe?

To start the conversation, here's two problems I heard about often related to the Prettier plugin

• Doesn't work with pnpm. This is an issue in Prettier itself when using plugins, not sure if relevant if the plugin was bundled? ex issue on the repo: 🐛 BUG: No parser could be inferred for file: Author.astro when using pnpm prettier-plugin-astro#97
• Users are confused about attribute names being removed. Beside the fact that the language-server currently has issues with that syntax, it seems to be pretty unfamiliar to most users. I'd personally vote for the long syntax being the default. ex issue: 🐛 BUG: Attributes names are removed prettier-plugin-astro#114

[jasikpark]

#2 in your list will be addressed by version 0.1.0 - @antonyfaris might be able to speak best to where the plugin is at

[jasikpark]

I've got some idempotency tests that I need to put up for the plugin

[antonyfaris]

Just to let you know the long syntax will be the new default by version 0.1.0 of the plugin.

[kissu]

I know that some people (me included) also run prettier directly into ESlint (no server running) and some colleagues may not be on VScode. I'm not sure if a Prettier formatting through ESlint is planned (or already possible), but it would also be really nice.

Otherwise, huge kudos for this being handled by the extension! 🙏🏻

[Princesseuh]

I am not sure if I got exactly what you meant, but if you're talking about this plugin then it just depends on having ESLint support and is not something we need to provider particular support for

You might even be able to get it running already using this experimental ESLint parser and our Prettier plugin 😄

[kissu]

@Princesseuh yeah I'm using eslint-plugin-prettier quite heavily on all of my projects, with some Vue + JS ESlint + Prettier basic configuration, can't really live without it. ❤️

I do have a perfectly working JS + Vue configuration for both ESlint and Prettier right now. Would be perfect to also append Astro to the list. 🏅