Search code examples
cssvisual-studio-codeautocompletecurly-braces

CSS auto-complete curly braces


Is it possible to add curly braces and open up the ruleset body to its own empty line automatically (autocomplete) in CSS file after pressing {? I can't find any info on that. I find it surprising that it doesn't exist, didn' find any answer when I google it...

VS Code does this:

.auto_curly_braces{}

And I'm looking for this: (with cursor under the selector)

.auto_curly_braces {

}

Solution

  • Is it possible to add curly braces and open up the ruleset body to its own empty line automatically (autocomplete) in CSS file after pressing {?

    No. VS Code will automatically add the closing curly brace, but it will not automatically create a new line for declarations inside the rulset's body.

    But all you need to do to get that is to press enter after typing {.

    As far as I know, it is not configurable to skip pressing enter to get to that text state. And it's not universally, objectively accepted as a good thing to always have each CSS declaration in its own line (especially when there's only one declaration in the ruleset), which is probably part of the reason why.