VS Code自动为HTML5无需自闭合的标签添加闭合标记该如何解决

确认当前使用的格式化工具 #

先确认你正在使用的HTML格式化程序：

• 打开任意HTML文件，右键编辑区空白位置，选择「使用...格式化文档」
• 查看弹出列表里标记为「默认」的工具，对应修改下方对应配置即可

方案1：使用VS Code内置HTML格式化工具 #

• 打开设置面板，快捷键为 Ctrl+,（Windows/Linux）或 Cmd+,（Mac）
• 搜索配置项 html.format.selfClosingVoidElements，取消该选项的勾选即可

该配置项作用为控制是否自动给HTML空元素添加自闭合斜杠，关闭后meta、input、br、img等HTML5规范中无需自闭合的空元素就不会被自动添加/>标识

方案2：使用Prettier作为格式化工具 #

两种修改方式二选一即可：

全局生效配置 #

• 打开设置面板，搜索Prettier: Html Self Closing，取消该选项的勾选

项目单独生效配置 #

• 在项目根目录新建.prettierrc配置文件，添加如下内容：

{
  "htmlSelfClosing": false
}

方案3：Emmet自动补全时带出自闭合标识 #

如果是输入标签触发Emmet自动补全时就自带自闭合斜杠，修改Emmet配置即可：

• 打开设置面板，搜索Emmet: Syntax Profiles，点击「在settings.json中编辑」
• 在配置中添加如下字段：

"emmet.syntaxProfiles": {
  "html": {
    "self_closing_tag": false
  }
}

方案4：使用Beautify作为格式化工具 #

• 打开设置面板搜索Beautify: Config，在Beautify配置中添加如下规则：

{
  "html": {
    "selfClosingStyle": "none"
  }
}

补充说明：label不属于HTML空元素，正常不会被自动添加自闭合标识，如果你的label也出现了该问题，检查是否手动配置过额外的自闭合标签列表，还原为默认值即可。

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