format *.vue style like unocss/tailwindcss hover:bg-red-400 got blank space

[JiatLn]

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

<style scoped lang="scss">
h3 {
  @apply hover:text-red-400 // <- when save file it change to hover: text-red-400
}
</style>

[johnsoncodehk]

This is https://github.com/microsoft/vscode-css-languageservice behavior we can't fix, but you can change css formatter to prettier by https://github.com/johnsoncodehk/volar-plugins/tree/master/packages/prettier.

[wlkns]

I'm also facing this issue, is there a configuration option or way to use prettier globally versus within a single project?

[leosin]

same +1

how to use prettier only format css code in .vue file?

or can i use stylelint to fix?

i don't like prettier plug to format vue template..

[jamiecarter7]

+1

[pgrazek]

+1

[Boris-Karamanolev]

Any fix?

[johnsoncodehk]

@wlkns You can feature request for it.

@leosin You can make you own stylelint plugin by volar langauge service plugin API. And you can push it to https://github.com/johnsoncodehk/volar-plugins if you want.

[Boris-Karamanolev]

Is there any workaround at the moment? This is really breaking development.

[acidjazz]

i tried the volar plugin - didnt work - this did ->

1. Install the Prettier formatter
2. Add this to your User settings JSON

    "[css]": {
        "editor.formatOnSave": true,
        "diffEditor.codeLens": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }

To get to this settings file:

1. open your command palette with cmd+p or ctrl+p
2. type > and look for Open User Settings (JSON)

To make sure this is working:

1. type > again in your command palette
2. search for Developer: Reload Window

[kknono]

i tried the volar plugin - didnt work - this did ->

1. Install the Prettier formatter
2. Add this to your User settings JSON

    "[css]": {
        "editor.formatOnSave": true,
        "diffEditor.codeLens": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }

To get to this settings file:

1. open your command palette with cmd+p or ctrl+p
2. type > and look for Open User Settings (JSON)

To make sure this is working:

1. type > again in your command palette
2. search for Developer: Reload Window

"CSS › Format: Enable"
disabled

[tve]

I don't find that

    "[css]": {
        ...
    }

works 'cause it only applies to .css files. Like the OP I need it to apply to the CSS in .vue files. Switching .vue files to use prettier as the default formatter works but I really don't like how it formats templates...

[xinlangzi]

Anyone has solution to avoid the auto space inside the .vue file?

[focussing]

Is there any workaround at the moment? This is really breaking development.

[wlkns]

The solution is to install prettier within the project itself with the tailwind prettier plugin. This seems to have worked for me.

[focussing]

@wlkns thanks, if I understand you correctly that would be another workaround, no solution. Vetur didn't have this issue so in this case Volar is one step back.
Either implement a working built-in formatter or leave it out completley.

[johnsoncodehk]

Either implement a working built-in formatter or leave it out completley.

The results here are consistent with formatting .scss in VSCode, I suggest you open an issue with https://github.com/microsoft/vscode-css-languageservice.

[focussing]

OK thank you for the suggestion, I’ve just done that. I hope it will be resolved soon… A lot of people have problems with this issue as I seen on the internet. Best regards, Mit freundlichen Grüßen, Met vriendelijke groet, Raymond Verbruggen FOCUSSING Mispel 8 7621 WB Borne Netherlands +31 6 250 500 69 ***@***.***> ***@***.*** <http://www.focussing.nl/> www.focussing.nl Van: Johnson Chu ***@***.***> Verzonden: zondag 19 februari 2023 22:53 Aan: vuejs/language-tools ***@***.***> CC: Raymond Verbruggen ***@***.***>; Comment ***@***.***> Onderwerp: Re: [vuejs/language-tools] format *.vue style like unocss/tailwindcss hover:bg-red-400 got blank space (Issue #1448) Either implement a working built-in formatter or leave it out completley. The results here are consistent with formatting .scss in VSCode, I suggest you open an issue with https://github.com/microsoft/vscode-css-languageservice. — Reply to this email directly, view it on GitHub <#1448 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGL7MGBI4QKNLY7IFGTYN3LWYKI2DANCNFSM5YTHEKGQ> . You are receiving this because you commented. <https://github.com/notifications/beacon/AGL7MGDOMV3B62G7LFPZFGTWYKI2DA5CNFSM5YTHEKG2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOKWMT46Y.gif> Message ID: ***@***.*** ***@***.***> >

[WilliamYi74]

same +1 inside .vue style, have any solution?

[Gal94]

It seems to have been fixed in the upstream, could this issue get looked into?
@johnsoncodehk

[so1ve]

My suggestion is not to use Volar's built-in formatter. You can install the prettier extension in vscode and set editor.defaultFormatter to it.

[focussing]

I checked with VSCODE version 1.80.0 (june 2023) and Volar extension version 1.8.4 (5 days ago) and the issue is NOT FIXED

[so1ve]

@focussing This bug hasn't been fixed in vscode yet (they didn't update the dependencies and create a new release). Once this issue is resolve in upstream, we can upgrade dependencies to fix this problem.

[focussing]

@so1ve I used your suggestion to use Prettier because it takes too long to have it done right in Volar/Code.
It works superb, thank you!
Hopefully they decide to eiter fix it or to leave it out completely or "do nothing".