FR: Add a setting to switch prettyhtml to Prettier 2.x for <template>

[mesqueeb]

Feature Request:

• Add a setting to switch prettyhtml to Prettier 2.x for <template>

original issue below:

---

prettyhtml is pretty much unmaintained and they have a notice on their README like so:

I think it would be better if Volar uses Prettier for the template section of a Vue file by default.

Is there a specific reason Volar chose prettyhtml over Prettier as the default HTML formatter?

---

Currently the only workaround is to set Prettier to completely format Vue files.

But that's not really an option because then we loose the proper sass-formating for the style lang=sass section of a Vue file. (sass formatting is something that Prettier can't do natively)

[johnsoncodehk]

I think we should respect the user's code and keep least invasive by default, so I chose other formatters instead of Prettier on html, pug, js, ts after compared. (Prettier is designed on the opposite principle)

In addition, instant availability is more important than maintenance. And prettyhtml is a mature enough project.

[mesqueeb]

Ok I understand the design philosophy.

I will update the issue to reflect it as a F.R. instead and we can close when we create the plugin system to change the default formatter to another.

[Shinigami92]

[...], so I chose other formatters instead of Prettier on html, pug, js, ts after compared. [...]

@mesqueeb sass formatting is something that Prettier can't do natively

Uhm... do I understand something wrong here? I'm the author or @prettier/plugin-pug and this formats the content of <template lang="pug"> quite well. So I don't understand why it should not work for <style lang="sass"> or anything like this 🤔

[johnsoncodehk]

@Shinigami92 I'm not mean Prettier not good, but it will "modify as much as possible to make the code look better", and my requirement is "to keep the original code as much as possible and only make necessary changes".

On the other hand, I also deliberately to not choose Prettier, because Prettier already has its own formatting extension. I hope users who like to extreme format the code to use Prettier's extension instead of focusing all their attention on an "all-rounder" Vue Extension. IMO this is better for Prettier ecology. (also to ESLint)

[mesqueeb]

@Shinigami92 Do you know how to set up Prettier to format .vue files but have auto-formatting for the <style lang="sass"> at the same quality as sass-formatter?

[Shinigami92]

No, I use explicite scss files, maybe subscribe this one: prettier/prettier#11747

[mesqueeb]

@johnsoncodehk

Do you have any goal for an amount of monetary support that would allow you to work on this feature?

• Specifically: allowing to switch prettyhtml for prettier for the template section.

--

The reason I'm really looking forward to this feature request is because until now we have used Vetur with Prettier formatting for the <template> sections.

I tried making the team switch to Volar for better TS support now we use Vue 3, but it causes all sorts of issues because the prettyhtml formatter is really different from what we had until now.
We basically need to turn off auto-formatting for the entire team if we wanna start using Volar. : S

Just one example of what happens in most of our files by letting Volar format the vue file:

[sheremet-va]

@mesqueeb In our team we are just using prettier as the default formatter (using it's extension) instead of Volar. Why can't you do the same?

[mesqueeb]

@sheremet-va
Because for the style section we use: <style lang="sass">

and Prettier won't lint the style section at all because we use sass....

You can also check this prettier thread, they're not even interested in supporting sass:
prettier/prettier#11747 (comment)

😭

[sheremet-va]

@mesqueeb Oh, I see, we are using scss and it's working fine with it. It's a shame javascript ecosystem is so divided!

Usually if I can't find a proper solution, I write my own VS Code plugin, sass-formatter API doesn't seem to be that difficult. The simplest solution would be to just string.replace code with formatted one :p

[mesqueeb]

@sheremet-va yeah 😄 but sass vs scss is the css ecosystem though, not the javascript ecosystem haha 😅

Would you be able to help me write a VSCode plugin that either

1. runs after volar for prettier on the .vue files template
2. or runs after prettier for sass-formatter on the .vue files style

We can probably sponsor some of the development from our company if I request.

[sheremet-va]

@mesqueeb I can try doing something like that on the weekends if you'l remind me. I'm on discord as async@0001

[mesqueeb]

@johnsoncodehk thanks so much for all your hard work!! I'm gonna try the new configuration to switch prettyhtml for prettier.

[johnsoncodehk]

@mesqueeb it's not release yet. :)

[mesqueeb]

@johnsoncodehk

is there an easy way to setup VSCode with Volar to auto-format Prettier 2.x for HTML & Script, but use syler.sass-indented for <style lang="sass"> sections?

We use Prettier 2.x now to format the entire vue file, but it can't format the SASS for us now. I was hoping Volar could perhaps take care of that. (we don't wanna use volar's default prettierHTML though)

I looked here: #1027
but it looked like something very very complex to set up. 😅 or maybe i'm wrong

[johnsoncodehk]

@mesqueeb You just to install https://github.com/johnsoncodehk/volar-plugins/tree/master/packages/sass-formatter