如何让VS Code在CSS中按下{后自动展开带空行的规则集？

可以通过以下两种方式实现你要的效果：

方式一：利用VS Code内置格式化设置 #

1. 打开设置面板（快捷键 Ctrl+, / Cmd+,）
2. 搜索并开启 editor.formatOnType：开启后输入符号时会自动触发格式化
3. 搜索 css.format.braces，将其设置为 Same line：确保大括号与选择器在同一行，且中间有空格
4. 搜索 css.format.indentInsideBraces，设置为 true：让大括号内的内容自动缩进（可选，根据个人习惯调整）

设置完成后，当你在CSS中输入 .auto_curly_braces { 并回车，VS Code会自动补全闭合大括号，并将光标放在中间的空行上，最终效果如下：

.auto_curly_braces {

}

方式二：自定义代码片段 #

如果内置设置无法满足需求，你可以创建自定义代码片段来实现：

1. 打开命令面板（Ctrl+Shift+P / Cmd+Shift+P），输入「Configure User Snippets」并回车
2. 选择 css.json 进入CSS代码片段配置文件
3. 添加以下代码：

"Curly braces with empty line": {
    "prefix": "{",
    "body": [
        "{",
        "",
        "}$0"
    ],
    "description": "Insert curly braces with an empty line inside"
}

保存后，当你输入 { 并按下 Tab 键，就会自动生成带空行的大括号结构，光标会定位在中间的空行位置。

内容的提问来源于stack exchange，提问作者Brom