VS Code - Prevent Format Document from putting CSS on one line

Question

I use format document a ton in VSCode and was wondering if there was a way to prevent VSCode from concatenating my CSS classes into one line and leave them as is?

For example, I'd have some CSS like below

.a,
.b {
  font-size: 10px;
}

Then when formatting the document is complete, it'll look like this:

.a, .b {
  font-size: 10px;
}

Is this something that can be prevented with VSCode or is there a plugin that I can install to do the same thing?

Answer 1

You have a few options.

1) You can use the js-beautify plugin (or similar) - https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify . Once installed you can use the 'preserve_newlines' setting in the .jsbeautifyrc config file

2) This can be done in vscode settings under the option 'html.format.preserveNewLines'