Auto-formatting of sass in Vue files via sass-formatter doesn't work

[mesqueeb]

For Vetur, we have set up:

{
  "vetur.format.defaultFormatter.sass": "sass-formatter",
}

Which then formats the style section of a Vue file using that sass-formatter.

Eg.

<style lang="sass">
 .class  
  color :  black;  
</style>

becomes:

<style lang="sass">
.class
  color: black
</style>

Volar seems to not have this Feature?

For our use case this would be required for Volar to be able to replace Vetur in our projects. : )

Thank you very much.

[johnsoncodehk]

See #444 (reply in thread).

Third-party formatter would be support by plugin API (#185).

[mesqueeb]

@johnsoncodehk Hmmm, ideally we would want the formatting feature natively built into Volar.
Especially since Evan wants to push Volar to be the default library instead of Vetur.

Expecting users to install both Volar and Vetur and then set Vetur to only formatting seems a little bit complex for newer developers, and especially newer developers are the ones that benefit most from auto-formatting of the style section in Vue files.

Do you have no plans to change your thought train on this feature? I'm interested to know your thoughts.

Best regards,
Luca

[mesqueeb]

ps: I see that you want to implement it via a Volar plugin? interested how newbie friendly this can be. Is this like a VSCode plugin to complement the Volar extension? Or how would this work?

ps2: I become a sponsor 🎉

[johnsoncodehk]

volar was not developed for the purpose of replacing vetur. I have strong subjective opinions on ide support, I just design volar's features in the correct way in my view. We will not implement a feature because vetur have it, so volar many features designs are actually very different to vetur.

If you want to know why I think so:

• Built-in support for non-built-in features of vue is not a suitable design
• This project is huge, I need to make sure its core is streamlined to move forward smoothly

Adding features is simple usually, but sometimes this will increase the complexity of the project, the increase in complexity will increase the difficulty of the project's maintenance exponentially. Therefore, in order to prevent the project becoming a monster, it is more important to "do not add some features" correctly. (Of course this requires a comprehensive consideration of many factors)

ps: I see that you want to implement it via a Volar plugin? interested how newbie friendly this can be. Is this like a VSCode plugin to complement the Volar extension? Or how would this work?

I hope it to be like this. https://docs.unity3d.com/Manual/upm-ui.html
But everything is undecided, the goal of full-time development is still far away.

ps2: I become a sponsor 🎉

Thank you!

[mesqueeb]

@johnsoncodehk I understand the design philosophy.

Is there any way we can keep this issue open until it's possible to have auto-formatting via some plugin? Much appreciated.

I think we can consider opening this issue and attaching issue-hunt goal as well. So people can come and put money in towards this feature specifically.

Auto-formatting of the vue files with sass css is pretty important I believe ;)

[johnsoncodehk]

If you just want sass formatting out of the box instead of a configurable formatter, I can actually simply add it in next version. And move it out after implemented plugin api.

[mesqueeb]

@johnsoncodehk

that would be very very very much appreciated! I don't care so much about configuring.

The formatter that Vetur uses for lang="sass" is this one: https://github.com/TheRealSyler/sass-formatter. (the default configuration of sass-formatter is more than enough!)

So if this can be run on <style lang="sass"> sections of Vue files, then I think I have everything I need from Volar to switch from Vetur.

---

The template and script sections are already formatted through Volar (powered by Prettier) right?

Then, since Volar will be the one doing formatting for Vue files, we need to set .vscode/settings.json to this, right?

{
  "[vue]": { "editor.defaultFormatter": "johnsoncodehk.volar" },
}

[mesqueeb]

Basically, sass-formatter would be added to the readme here:

because sass seems to be the only one left out that doesn't have any auto-formatting with Volar. 😅

[johnsoncodehk]

Added in 1cc570d