# vue/html-self-closing
enforce self-closing style
- ⚙️ This rule is included in all of
"plugin:vue/vue3-strongly-recommended","plugin:vue/strongly-recommended","plugin:vue/vue3-recommended"and"plugin:vue/recommended". - 🔧 The
--fixoption on the command line (opens new window) can automatically fix some of the problems reported by this rule.
# 📖 Rule Details
This rule aims to enforce the self-closing sign as the configured style.
In Vue.js template, we can use either two styles for elements which don't have their content.
<YourComponent></YourComponent><YourComponent/>(self-closing)
Self-closing is simple and shorter, but it's not supported in the HTML spec.
<template>
<!-- ✓ GOOD -->
<div/>
<img>
<MyComponent/>
<svg><path d=""/></svg>
<!-- ✗ BAD -->
<div></div>
<img/>
<MyComponent></MyComponent>
<svg><path d=""></path></svg>
</template>
# 🔧 Options
{
"vue/html-self-closing": ["error", {
"html": {
"void": "never",
"normal": "always",
"component": "always"
},
"svg": "always",
"math": "always"
}]
}
html.void("never"by default) ... The style of well-known HTML void elements.html.normal("always"by default) ... The style of well-known HTML elements except void elements.html.component("always"by default) ... The style of Vue.js custom components.svg("always"by default) .... The style of well-known SVG elements.math("always"by default) .... The style of well-known MathML elements.
Every option can be set to one of the following values:
"always"... Require self-closing at elements which don't have their content."never"... Disallow self-closing."any"... Don't enforce self-closing style.
# html: {normal: "never", void: "always"}
<template>
<!-- ✓ GOOD -->
<div></div>
<img/>
<MyComponent/>
<svg><path d=""/></svg>
<!-- ✗ BAD -->
<div/>
<img>
<MyComponent></MyComponent>
<svg><path d=""></path></svg>
</template>
# 📚 Further Reading
# 🚀 Version
This rule was introduced in eslint-plugin-vue v3.11.0