void元素末尾斜杠的使用问题及Prettier配置调整方法

一、校验提示的含义 #

首先明确：HTML中的**空元素（void elements）**指无需闭合标签的元素，比如<img>、<input>、<br>、<meta>这类元素。校验提示的两点核心意思是：

• 末尾斜杠无实际作用：HTML5规范里，空元素本身就被定义为无需闭合，加不加/浏览器都会正确解析，这个斜杠属于冗余写法，没有任何功能层面的意义。
• 与未加引号的属性值兼容性差：如果空元素的属性值未加引号（比如<input type=text/>），部分老旧浏览器或解析器会错误地将text/识别为完整的属性值，导致元素解析异常，引发兼容性问题。

二、这是否是需要解决的问题？ #

从功能层面看，现代主流浏览器都能兼容带末尾斜杠的空元素，你的代码逻辑不会出错。但从规范和最佳实践角度：

• 这不符合HTML5的推荐写法，属于冗余格式；
• 若代码需要适配老旧环境，可能存在潜在兼容性风险；
• 如果你希望校验工具给出“代码正常”的提示，那这属于需要调整的格式问题。

三、Prettier中取消添加末尾斜杠的方法 #

你可以通过两种方式修改Prettier配置：

方式1：VS Code图形化设置 #

1. 打开VS Code设置界面（快捷键：Windows/Linux按Ctrl+,，Mac按Cmd+,）；
2. 在搜索框输入Prettier Html Self Closing Comma；
3. 取消勾选该选项，保存设置即可。

方式2：配置文件（推荐，更稳定） #

在项目根目录创建或修改.prettierrc文件，添加以下配置：

{
  "html": {
    "selfClosingComma": false
  }
}

保存后，Prettier格式化HTML时就不会再给空元素添加末尾斜杠了。

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