How to auto format CSS curly braces on new lines in HTML files?

Question

In VSCode built-in auto formatter, the CSS formatter puts opening curly braces on the same line.

.myClass {
    font-size: 12px;
}

Is there a way to configure the built-in VSCode formatter to put them on new lines?

.myClass
{
    font-size: 12px;
}

Update

For CSS files I am able to use the setting css.format.braceStyle. However, this does not work for CSS inside HTML files.

Answer 1

The builtin HTML language support extension is separate from the builtin CSS language support extension in this regard. They don't share formatting settings with each other. If anything, the maintainers would add dedicated HTML formatting settings for this (source). I don't think such settings for HTML formatting exist at the moment.

See also

• https://github.com/microsoft/vscode/tree/main/extensions
• https://github.com/microsoft/vscode-html-languageservice
• https://github.com/microsoft/vscode-css-languageservice

Answer 2

I dont believe that VS Code offers braces on new lines for CSS, unfortunately. There are plenty of extensions that offer more in-depth options than the out-of-box VScode formatter offers, so maybe consider checking out Prettier, ESLint, or Beautify.