useSelfClosingElements (since v1.0.0)
Diagnostic Category: lint/style/useSelfClosingElements
Sources:
- Same as:
@stylistic/jsx-self-closing-comp
Prevent extra closing tags for components without children
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 │
ℹ Unsafe fix: Use a SelfClosingElement 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 │
ℹ Unsafe fix: Use a SelfClosingElement 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 │
ℹ Unsafe fix: Use a SelfClosingElement 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>