useSelfClosingElements
Diagnostic Category: lint/style/useSelfClosingElements
Since: v1.0.0
Sources:
- Same as:
@stylistic/jsx-self-closing-comp
Description
Section titled DescriptionPrevent 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>How to configure
Section titled How to configure{ "linter": { "rules": { "style": { "useSelfClosingElements": "error" } } }}