如何配置VS Code实现特定HTML标签同级无缩进自动格式化？

我之前也遇到过完全一样的困扰，每次手动调整格式太麻烦了！下面给你两种常用的配置方案，根据你用的格式化工具来选：

方案一：用VS Code内置的HTML格式化器（推荐，配置更直接） #

这个是VS Code自带的格式化工具，基于js-beautify，刚好有对应的配置项满足你的需求：

1. 打开VS Code的用户设置（快捷键 Ctrl+, 或者 Cmd+,）
2. 点击右上角的{}图标，进入JSON格式的设置界面
3. 添加以下配置：

{
  // 开启内置HTML格式化
  "html.format.enable": true,
  // 取消在<head>、<body>等标签前后添加空行
  "html.format.extraLiners": "",
  // 不让<head>和<body>的直接子元素缩进（关键配置）
  "html.format.indentInnerHtml": false,
  // 把行宽设大，避免标签自动换行
  "html.format.wrapLineLength": 1000,
  // 保留手动添加的换行（确保每个标签单独一行）
  "html.format.preserveNewlines": true,
  // 指定HTML文件用内置格式化器
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  // 可选：开启保存时自动格式化
  "editor.formatOnSave": true
}

配置说明： #

• html.format.extraLiners：默认会在<html>、<head>、<body>前后加空行，清空后就不会有多余空行。
• html.format.indentInnerHtml：设为false后，<head>里的<meta>、<title>，以及<body>里的直接子元素（比如<h1>、<ul>）都会从行首开始，而它们的后代元素（比如<ul>里的<li>）依然保持正常缩进，完美符合你的要求。
• wrapLineLength：设大值避免标签因为行宽不够被拆成多行。

方案二：用Prettier格式化工具 #

如果你习惯用Prettier，需要调整它的配置来近似实现需求：

1. 确保安装了Prettier插件
2. 在项目根目录创建.prettierrc文件，添加以下配置：

{
  "htmlWhitespaceSensitivity": "ignore",
  "printWidth": 1000,
  "tabWidth": 2,
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "parser": "html"
      }
    }
  ]
}

然后在VS Code设置里指定HTML用Prettier格式化：

"[html]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

不过要注意，Prettier默认会给所有HTML元素加缩进，所以如果要完全实现<head>、<body>直接子元素无缩进的话，可能需要额外的自定义规则（比如用Prettier插件的扩展），相比之下内置格式化器的配置更精准匹配你的需求。

最后一步：测试配置 #

新建一个HTML文件，输入代码后按Shift+Alt+F格式化，或者开启formatOnSave后保存文件，就能看到效果和你想要的一致了！

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