- 环境：
vue cli 3.0初始化带有eslint项目
触发位置：
<img class="avatar" :src="photoUrl" alt="avatar" />
- 解决：
报错内容是：不允许对HTML void元素进行自动关闭
- 方法一：
<img class="avatar" :src="photoUrl" alt="avatar">
...
rules: {
...
"vue/html-self-closing": ["error", {
"html": {
"void": "always",
"normal": "never",
"component": "always"
},
"svg": "always",
"math": "always"
}],
...
}
...
{
"vue/html-self-closing": ["error", {
"html": {
"void": "never",
"normal": "always",
"component": "always"
},
"svg": "always",
"math": "always"
}]
}
<template>
<!-- ✓ GOOD -->
<div/>
<img>
<MyComponent/>
<svg><path d=""/></svg>
<!-- ✗ BAD -->
<div></div>
<img/>
<MyComponent></MyComponent>
<svg><path d=""></path></svg>
</template>
{
"vue/html-self-closing": ["error", {
"html": {
"void": "always",
"normal": "never",
"component": "always"
},
"svg": "always",
"math": "always"
}]
}
<template>
<!-- ✓ GOOD -->
<div></div>
<img/>
<MyComponent/>
<svg><path d=""/></svg>
<!-- ✗ BAD -->
<div/>
<img>
<MyComponent></MyComponent>
<svg><path d=""></path></svg>
</template>
