Search code examples
cssvisual-studio-codeformattingautoformattingvs-code-settings

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

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.

enter image description here

Solution

  • 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