能否通过VS Code设置实现HTML同级元素间自动添加空行？

最近用VS Code写HTML，想找个方法让同级元素之间自动添加空行，不用手动操作，但没找到现成设置。现在输入tabs按tab键触发的代码片段效果如下：

当前效果 #

<div class="tabs js-tabs">
    <div class="tabs__head">
        <div class="tabs__nav"></div><!-- /.tabs__nav -->
    </div><!-- /.tabs__head -->
    <div class="tabs__body">
        <div class="tab"></div><!-- /.tab -->
    </div><!-- /.tabs__body -->
</div><!-- /.tabs js-tabs -->

期望效果 #

<div class="tabs js-tabs">
    <div class="tabs__head">
        <div class="tabs__nav"></div><!-- /.tabs__nav -->
    </div><!-- /.tabs__head -->

    <div class="tabs__body">
        <div class="tab"></div><!-- /.tab -->
    </div><!-- /.tabs__body -->
</div><!-- /.tabs js-tabs -->

解决方法 #

1. 直接修改代码片段

如果是内置或自定义的tabs代码片段，直接编辑内容即可：

• 按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入Configure User Snippets，选择html.json。
• 找到tabs对应的代码块，在同级元素（比如.tabs__head和.tabs__body）之间手动添加空行，保存后再触发片段就会自动带空行。

2. 用格式化工具自动处理（推荐）

借助Prettier插件实现格式化时自动添加空行：

• 安装VS Code的Prettier插件。
• 打开设置（Ctrl+,/Cmd+,），搜索Prettier: Html Whitespace Sensitivity，设置为ignore。
• 可在项目根目录创建.prettierrc文件，添加以下配置增强效果：

{
  "htmlWhitespaceSensitivity": "ignore",
  "bracketSpacing": true,
  "printWidth": 100
}

之后保存文件时，Prettier会自动给同级HTML元素之间加上空行。

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