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?

Mark · Accepted Answer · 2022-10-10 15:44:34Z

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)

answered Oct 10, 2022 at 15:44

Mark

191k32 gold badges556 silver badges579 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Garret Wilson Over a year ago

So does the VS Code built-in Beautify implementation ignore my .jsbeautifyrc file? Does anything built-in to VS Code look at .jsbeautifyrc? (e.g. What about the HTML formatter?)

Garret Wilson Over a year ago

Interestingly enabling the VS Code setting Files: Insert Final Newline actually adds the newline during built-in formatting we well, even though the description for that setting only mentions "… when saving it". It is very good that they made the built-in formatter aware of that setting, but one might not know just from reading the description that it affected the formatter as well.

Collectives™ on Stack Overflow

configure VS Code CSS formatting

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related