⏎ 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>