useSelfClosingElements
Summary
Section titled “Summary”- Rule available since:
v1.0.0 - Diagnostic Category:
lint/style/useSelfClosingElements - This rule has a safe fix.
- The default severity of this rule is information.
- Sources:
- Same as
@stylistic/jsx-self-closing-comp
- Same as
Description
Section titled “Description”Prevent extra closing tags for components without children.
JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Examples
Section titled “Examples”Invalid
Section titled “Invalid”<div></div>code-block.jsx:1:1 lint/style/useSelfClosingElements FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
> 1 │ <div></div>
│ ^^^^^^^^^^^
2 │
ℹ Safe fix: Use a self-closing element instead.
1 │ - <div></div>
1 │ + <div·/>
2 2 │
<Component></Component>code-block.jsx:1:1 lint/style/useSelfClosingElements FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
> 1 │ <Component></Component>
│ ^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Safe fix: Use a self-closing element instead.
1 │ - <Component></Component>
1 │ + <Component·/>
2 2 │
<Foo.bar></Foo.bar>code-block.jsx:1:1 lint/style/useSelfClosingElements FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
> 1 │ <Foo.bar></Foo.bar>
│ ^^^^^^^^^^^^^^^^^^^
2 │
ℹ Safe fix: Use a self-closing element instead.
1 │ - <Foo.bar></Foo.bar>
1 │ + <Foo.bar·/>
2 2 │
<div /><div>child</div><Component /><Component>child</Component><Foo.bar /><Foo.bar>child</Foo.bar>Options
Section titled “Options”ignoreHtmlElements
Section titled “ignoreHtmlElements”Default: false
This option allows you to specify whether to ignore checking native HTML elements.
In the following example, when the option is set to “true”, it will not self close native HTML elements.
{ "//":"...", "options": { "ignoreHtmlElements": true }}<div></div>How to configure
Section titled “How to configure”{ "linter": { "rules": { "style": { "useSelfClosingElements": "error" } } }}