[css] provide css formatter

[isidorn]

Refs #19047

Our css does not support formating a range, thus formatOnPaste is useless for CSS.
And this is actually the only use case I personally have for formatOnPaste, since I always copy rules from chrome dev tools and they are always wrongly indented. However formatOnPaste does not help me here

[jrieken]

Life is unfair. There is also formatOnType for json and no party without hangover

[aeschli]

There are extensions that provide formatting css. I'd suggest you try one of these.
IMO we should not package it all to VSCode. We want to share the maintenance work and want to keep the VSCode download small.

[isidorn]

Sure but then we should somehow communicate this to our users of formatOnPaste setting

[aeschli]

@isidorn Can you create a separate issue for the suggestion to communicate it better (or rename this issue)

[isidorn]

@aeschli part of that is already captured in #19160

Apart from that I would expect that our docs cover this - created this one microsoft/vscode-docs#809

[vkWeb]

CSS formatting is an integral part of a text editor. I request you @jrieken that you'll look into this.

[aeschli]

@vkWeb CSS formatting is available as an extension. Check out the markerplace

[vkWeb]

@aeschli Ya I know that :). I was trying to say that a code editor must have some kind of default formatting options for CSS. VSCode lacks that. Though, It's not a big deal ;)

[levinit]

need css formatter:pray:

[vkWeb]

@levinit You can use Prettier - A great code formatter for JS, CSS & Typescript.

[levinit]

@vkWeb thx ,I have installed it, it works.(although I hope vscode integrates css formatter:yum:)

[vkWeb]

@levinit Once you get into general purpose programming or back-end stuff. You'll realize VSCode is a gem. A true gem! ❤️ 😃

[Neutrino-Sunset]

Is there actually a css formatter in the marketplace that obeys the editorconfig indentation settings? Because I've tried about half a dozen and haven't found one that does yet.

[stevensacks]

The extensions that "handle formatting css" do not work while you type, and even then none of them follow the rules set in your prettier, scss-lint, editorconfig, etc.

Your Javascript editor formats/indents as you type, no extensions required. Your CSS editor should do the same. There's no excuse for it not to.

To drive the point home, here is VSCode on the left and WebStorm on the right. Which editor would you rather use? Imagine if this file was more complicated.

Your editor does the kind of behavior demonstrated on the right with Javascript. Why on earth doesn't it do the same basic formatting for css/scss?

Unfortunately, prettier is not working for scss/css files in VS Code, as you can see. I have prettier installed along with Beautify css/sass/scss - none of them do anything, as the gif demonstrates.

If I use the Format Code key command it formats css in a way that breaks all the scss-lint rules I have (for one, it removes all empty lines from the entire file).

Fact of the matter is, WebStorm is eating your lunch on a feature that should be native to VSCode which is basic formatting of css as shown in the above gif. Don't pass the buck just because CSS-in-JS is so popular.

And yes, the lack of this feature is more than enough to keep people from "making the switch" to VS Code regardless of the other things it has. WebStorm is a superior CSS editor out of the box. PERIOD. And you are settling for that? Really? Where's your developer pride? This ticket is over 1.5 years old for crying out loud, and it's been closed a bunch of times by people who apparently have ZERO pride in writing an acceptable css editor. You're alienating a ton of people.

[aeschli]

BTW there's only so much the VSCode team can work on and maintain. We prioritize on the number of votes on the issues (👍 on the issue description). That's also why we keep these bugs open.

Besides, not everything should and can be bundled with VSCode. That's why we have an extension API and a marketplace. That lets us share the maintenance work, encourage participation & innovation and want to keep the VSCode download small.

Please support these extension authors by using their extensions and give feedback. File issues describing the functionality they are missing (e.g. don't remove my empty lines).

Adding 'format on save' requires implementing a OnTypeFormattingEditProvider

[kanlukasz]

Besides, not everything should and can be bundled with VSCode. That's why we have an extension API and a marketplace. That lets us share the maintenance work, encourage participation & innovation and want to keep the VSCode download small.

Please support these extension authors by using their extensions and give feedback. File issues describing the functionality they are missing (e.g. don't remove my empty lines).

I understand that it's not possible to bundle everything in one BUT if you have built-in HTML and JS formatter and you don't have CSS formatter, something is really illogical here.
JS, HTML, CSS - it's all very closely related.

You say - use add-ons from Marketplace.
I'd really like to do that, but please see how some add-ons work.
Many of them do not have proper documentation and many bugs. Many things don't work properly.
Add-ons developers leave their projects. I often see an decription like: "I don't have time to work on it, if you want you can take over this project"
Maybe I'm too pessimistic but thats how it works, unfortunately...

To sum up - the built-in CSS formatter is something really important. I hope you add it

[aeschli]

Closing as we still have no plans to include a CSS formatter as discussed in #19166 (comment)

[ArturoDent]

Nit: In the description for CSS > Format: Newline Between Selectors, it says

Separate selectors with a new line.

I believe that should say newline rather than new line.

@isidorn