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>