@stylistic/

jsx-self-closing-comp

子要素のないコンポーネントの不要な終了タグを許可しません。

子要素のないコンポーネントは、不要な終了タグを避けるために自己終了させることができます。

ルールの詳細

このルールの**誤った**コードの例

var HelloJohn = <Hello name="John"></Hello>;

var HelloJohnCompound = <Hello.Compound name="John"></Hello.Compound>;

このルールの**正しい**コードの例

var contentContainer = <div className="content"></div>;

var intentionalSpace = <div>{' '}</div>;

var HelloJohn = <Hello name="John" />;

var HelloJohnCompound = <Hello.Compound name="John" />;

var Profile = <Hello name="John"><img src="picture.png" /></Hello>;

var ProfileCompound = <Hello.Compound name="John"><img src="picture.png" /></Hello.Compound>;

var HelloSpace = <Hello>{' '}</Hello>;

ルールオプション

このルールは、可能な場合に自己終了させるべきタグの種類を選択するための引数を1つ取ることができます。デフォルトでは、カスタムコンポーネントタグとHTMLタグは自己終了させる必要があります。

...
"@stylistic/jsx/jsx-self-closing-comp": ["error", {
  "component": true,
  "html": true
}]
...

component

trueの場合、カスタムコンポーネントタグは自己終了させる必要があります。

このルールの**誤った**コードの例

var HelloJohn = <Hello name="John"></Hello>;

このルールの**正しい**コードの例

var contentContainer = <div className="content"></div>;

var intentionalSpace = <div>{' '}</div>;

var HelloJohn = <Hello name="John" />;

var HelloJohnCompound = <Hello.Compound name="John" />;

var Profile = <Hello name="John"><img src="picture.png" /></Hello>;

var ProfileCompound = <Hello.Compound name="John"><img src="picture.png" /></Hello.Compound>;

html

trueの場合、HTMLコンポーネントタグは自己終了させる必要があります。

このルールの**誤った**コードの例

var contentContainer = <div className="content"></div>;

このルールの**正しい**コードの例

var contentContainer = <div className="content" />;

var contentContainer = <div className="content"><div /></div>;

var intentionalSpace = <div>{' '}</div>;