Disallow self-closing on HTML void elements

环境：

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>

来源：CSDN

作者：lydxwj

链接：https://blog.csdn.net/lydxwj/article/details/103564686