# svelte/html-self-closing
enforce self-closing style
- 🔧 The
--fix
option on the command line can automatically fix some of the problems reported by this rule.
# 📖 Rule Details
You can choose either two styles for elements without content.
- always:
<SomeComponent />
- never:
<SomeComponent></SomeComponent>
<script>
/* eslint svelte/html-self-closing: "error" */
</script>
<!-- ✓ GOOD -->
<p>Hello</p>
<div></div>
<img />
<svelte:head />
<svg><path /></svg>
<math><msup></msup></math>
<SomeComponent />
<!-- ✗ BAD -->
<div Disallow self-closing on HTML elements. (svelte/html-self-closing)/>
<div><div Disallow self-closing on HTML elements. (svelte/html-self-closing)/></div>
<svelte:bodyRequire self-closing on Svelte special elements. (svelte/html-self-closing)></svelte:body>
<svg><pathRequire self-closing on SVG elements. (svelte/html-self-closing)></path></svg>
<math><msup Disallow self-closing on MathML elements. (svelte/html-self-closing)/></math>
<SomeComponentRequire self-closing on Svelte custom components. (svelte/html-self-closing)></SomeComponent>
# 🔧 Options
presets:
{
"svelte/html-self-closing": [
"error",
"default" // or "all" or "html" or "none"
]
}
config object:
{
"svelte/html-self-closing": [
"error",
{
"void": "always", // or "never" or "ignore"
"normal": "never", // or "always" or "ignore"
"svg": "always", // or "never" or "ignore"
"never": "never", // or "always" or "ignore"
"component": "always", // or "never" or "ignore"
"svelte": "always" // or "never" or "ignore"
}
]
}
presets:
default
- MathML and non-void HTML elements should have a closing tag; otherwise, they should be self-closing.all
- all elements should be self-closing (unless they have children)html
- html-compliant - only void elements and svelte special elements should be self-closingnone
- no elements should be self-closing
Note
We recommend selecting default
as the preset. Choosing any other option may result in settings that are inconsistent with the compiler when using Svelte5.
config object:
void
("always"
in default preset)… Style of HTML void elementsnormal
("never"
in default preset)… Style of other elementssvg
("always"
in default preset)… Style of SVGmath
(never
in default preset)… Style of MathMLcomponent
("always"
in default preset)… Style of svelte componentssvelte
("always"
in default preset)… Style of svelte special elements (<svelte:head>
,<svelte:self>
)
WARNING
foreign
is removed in eslint-plugin-svelte
v3.
Every config object option can be set to
- “always” (
<SomeComponent />
) - “never” (
<SomeComponent></SomeComponent>
) - “ignore” (either
<SomeComponent />
or<SomeComponent></SomeComponent>
)
# 🚀 Version
This rule was introduced in eslint-plugin-svelte v2.5.0