Skip to content
Biome
Docs Blog Playground

useSelfClosingElements (since v1.0.0)

Diagnostic Category: lint/style/useSelfClosingElements

Sources:

Prevent extra closing tags for components without children

Examples

Section titled Examples

Invalid

Section titled 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 │ 
  
  ℹ Unsafe 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 │ 
  
  ℹ Unsafe 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 │ 
  
  ℹ 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>
Section titled Related links