← Back to rules

react/self-closing-comp スタイル

🛠️ An auto-fix is available for this rule.

何を検出するか

子要素のないコンポーネントを検出し、不要な終了タグを回避するために自己閉じ形にできるかどうかを確認します。

なぜ問題なのか

子要素のないコンポーネントには明示的な終了タグは必要ありません。自己閉じ構文を使用することでコードがより簡潔になり、視覚的なごちゃつきも削減されます。また、空の要素に対する一般的な React や JSX の慣例にも従います。

空白文字を含む自己閉じコンポーネントは許可されていますが、改行も含まれている場合は例外です。

例

このルールに違反するコードの例：

const elem = <Component linter="oxlint"></Component>;
const dom_elem = <div id="oxlint"></div>;
const welem = <div id="oxlint"></div>;

このルールに準拠するコードの例：

const elem = <Component linter="oxlint" />;
const welem = <Component linter="oxlint"> </Component>;
const dom_elem = <div id="oxlint" />;

設定

このルールは以下のプロパティを持つ設定オブジェクトを受け取ります。

component

type: boolean

default: true

カスタムコンポーネントに対して自己閉じを強制するかどうか。

html

type: boolean

default: true

ネイティブの HTML 要素に対して自己閉じを強制するかどうか。

使い方

このルールを有効にするには、設定ファイルまたは CLI で以下のように使用できます：

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/self-closing-comp": "error"
  }
}

CLI

oxlint --deny react/self-closing-comp --react-plugin

参考情報

• ルールのソース