useSelfClosingElements

Diagnostic Category: lint/style/useSelfClosingElements

JavaScript (and super languages)

Since: v1.0.0

Sources:

Same as: @stylistic/jsx-self-closing-comp

Prevent extra closing tags for components without children

Examples

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

<div />

<div>child</div>

<Component />

<Component>child</Component>

<Foo.bar />

<Foo.bar>child</Foo.bar>

Options

`ignoreHtmlElements`

Since version 2.0.0.

Default: false

This option allows you to specify whether to ignore checking native HTML elements.

In the following example, when the option is set to “true”, it will not self close native HTML elements.

{
    "//":"...",
    "options": {
        "ignoreHtmlElements": true
    }
}

<div></div>