Lint Rules

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>