Disallow self-closing on HTML void elements

xiaojinglyd

墨衍会员 · AI 创作全网分发码龄9年

关注

原创最新推荐文章于 2026-05-03 18:25:43 发布 5.2k 阅读 AI 写同款· GEO 优化 ›

【ESLINT报错】eslint/tslint常见报错集合 eslint常见报错集合阅读详情

环境：

vue cli 3.0初始化带有eslint项目

触发位置：

<img class="avatar" :src="photoUrl" alt="avatar" />

解决：

报错内容是：不允许对HTML void元素进行自动关闭

方法一：

<img class="avatar" :src="photoUrl" alt="avatar">

方法二：

修改文件.eslintrc.js

...
rules: {
...
	"vue/html-self-closing": ["error", {
      "html": {
        "void": "always",
        "normal": "never",
        "component": "always"
      },
      "svg": "always",
      "math": "always"
    }],
...
}
...

详情：参考链接

配置1:

{
  "vue/html-self-closing": ["error", {
    "html": {
      "void": "never",
      "normal": "always",
      "component": "always"
    },
    "svg": "always",
    "math": "always"
  }]
}

示例1:

<template>
  <!-- ✓ GOOD -->
  <div/>
  <img>
  <MyComponent/>
  <svg><path d=""/></svg>

  <!-- ✗ BAD -->
  <div></div>
  <img/>
  <MyComponent></MyComponent>
  <svg><path d=""></path></svg>
</template>

配置2：

{
  "vue/html-self-closing": ["error", {
    "html": {
      "void": "always",
      "normal": "never",
      "component": "always"
    },
    "svg": "always",
    "math": "always"
  }]
}

示例2：

<template>
  <!-- ✓ GOOD -->
  <div></div>
  <img/>
  <MyComponent/>
  <svg><path d=""/></svg>

  <!-- ✗ BAD -->
  <div/>
  <img>
  <MyComponent></MyComponent>
  <svg><path d=""></path></svg>
</template>

收录于