什么是‘空元素末尾斜杠无作用’？Prettier格式化校验报错求助

一、错误信息的意思 #

Trailing slash on void elements has no effect 翻译过来是**“空元素上的末尾斜杠无效”**。

HTML里的空元素指<img>、<input>、<br>这类不需要闭合标签的元素，给它们加末尾斜杠（比如写成<img/>）或者不加，在现代浏览器里渲染效果完全一致，但你的代码校验工具（比如ESLint搭配HTML/Vue相关插件）可能有明确规则：要么统一给空元素加斜杠，要么统一不加，Prettier格式化后的写法和校验规则不一致，就触发了这个错误。

二、解决Prettier和校验工具的冲突 #

核心是让Prettier的格式化规则和代码校验规则统一，以下是具体方案：

1. 调整Prettier配置，匹配校验规则 #

如果你想让Prettier给空元素加上末尾斜杠，在你的Prettier配置文件（.prettierrc/.prettierrc.js）里添加或修改关键配置：

{
  // 保留你原有其他配置
  "selfClosingHtml": true // 让Prettier给空元素自动加末尾斜杠
}

如果是Vue项目，也可以用Vue专属配置：

{
  "vueSelfClosingTags": true
}

2. 调整校验工具规则，匹配Prettier #

如果更想保留Prettier的默认写法，就修改代码校验工具（比如ESLint）的规则：

• 若用Vue项目，在.eslintrc.js里修改vue/html-self-closing规则：

  module.exports = {
    rules: {
      "vue/html-self-closing": ["error", {
        "html": {
          "void": "never" // 允许空元素不加末尾斜杠
        }
      }]
    }
  }
  

• 通用HTML项目，调整对应ESLint规则（比如html-quotes或html-self-closing），允许空元素的两种写法。

3. 用eslint-config-prettier彻底消除冲突 #

如果上述方法都不管用，可以安装工具让ESLint直接采用Prettier的规则，禁用所有冲突的ESLint格式规则：

1. 安装依赖：

npm install eslint-config-prettier eslint-plugin-prettier --save-dev

2. 修改.eslintrc.js：

module.exports = {
  extends: [
    // 保留你原有的extends项，最后加上这两个
    "plugin:prettier/recommended",
    "prettier"
  ]
}

内容的提问来源于stack exchange，提问作者Juan pablo Rairan