useSelfClosingElements (since v0.7.0)
This rule is recommended by Rome.
Prevent extra closing tags for components without children
Examples
Invalid
<div></div>style/useSelfClosingElements.js: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 │
ℹ Suggested fix: Use a SelfClosingElement instead
1 │ - <div></div>
1 │ + <div·/>
2 2 │
<Component></Component>style/useSelfClosingElements.js: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 │
ℹ Suggested fix: Use a SelfClosingElement instead
1 │ - <Component></Component>
1 │ + <Component·/>
2 2 │
<Foo.bar></Foo.bar>style/useSelfClosingElements.js: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 │
ℹ Suggested fix: Use a SelfClosingElement instead
1 │ - <Foo.bar></Foo.bar>
1 │ + <Foo.bar·/>
2 2 │
Valid
<div /><div>child</div><Component /><Component>child</Component><Foo.bar /><Foo.bar>child</Foo.bar>