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

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

@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.

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

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

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

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.

@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”.

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…