useSelfClosingElements

Este conteúdo não está disponível em sua língua ainda.

JavaScript (and super languages)

Summary

Rule available since: v1.0.0
Diagnostic Category: lint/style/useSelfClosingElements
This rule has a safe fix.
The default severity of this rule is information.
Sources:
- Same as @stylistic/jsx-self-closing-comp

Description

Prevent extra closing tags for components without children.

JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.

Examples

Invalid

1
<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 │ 
  
  ℹ Safe fix: Use a self-closing element instead.
  
    1   │ - <div></div>
      1 │ + <div·/>
    2 2 │

1
<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 │ 
  
  ℹ Safe fix: Use a self-closing element instead.
  
    1   │ - <Component></Component>
      1 │ + <Component·/>
    2 2 │

1
<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 │ 
  
  ℹ Safe fix: Use a self-closing element instead.
  
    1   │ - <Foo.bar></Foo.bar>
      1 │ + <Foo.bar·/>
    2 2 │

Valid

1
<div />

1
<div>child</div>

1
<Component />

1
<Component>child</Component>

1
<Foo.bar />

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

Options

`ignoreHtmlElements`

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.

1
{
2
    "//":"...",
3
    "options": {
4
        "ignoreHtmlElements": true
5
    }
6
}

1
<div></div>

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "style": {
5
        "useSelfClosingElements": "error"
6
      }
7
    }
8
  }
9
}