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 warning.
- Sources:
- Same as
@stylistic/jsx-self-closing-comp
- Same as
Description
Section titled DescriptionPrevent 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 ExamplesInvalid
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 │
Valid
Section titled Valid<div /><div>child</div><Component /><Component>child</Component><Foo.bar /><Foo.bar>child</Foo.bar>Options
Section titled OptionsignoreHtmlElements
Section titled ignoreHtmlElementsDefault: 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" } } }}