configure VS Code CSS formatting

Question

For year's I've used js-beautify, first in Atom and recently in VS Code using the Beautify extension. Now it looks like that extension has been deprecated, and js-beautify is now built-in VS Code.

But with the extension I could add a .jsbeautifyrc file to specify formatting options, in particular end_with_newline to add a newline at the end of the file. I could even specify file type-specific options.

{
…
  "end_with_newline": true,
  "wrap_line_length": 0,
  "css": {
    "selector-separator-newline": false
  }
}

When I disable the extension and use the internal VS Code js-beautify, it no longer seems to honor the .jsbeautifyrc settings, and removes the trailing newline.

How do I configure the formatting settings of the internal VS Code js-beautify implementation?

Answer 1

If you search the settings for css format you will see there are a few there: newlines between selectors and rules, etc.

So you could disable CSS > Format: Newlines Between Selectors for example.

In addition, you can make css-specific settings like this (in your settings.json):

"[css]": {
  "files.insertFinalNewline": true
}

And make sure the setting CSS > Format: Enable is set to true. (the default is true)