Skip to content
← Back to rules

react/jsx-boolean-value スタイル

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

何をしますか

コード内のブール属性のスタイルを一貫性 있게強制します。

なぜ悪いですか?

JSXでは、ブール属性を true に設定するか、省略することができます。 このルールは、ブール属性のスタイルの一貫性を強制します。

デフォルトの "never" モードで誤りなコードの例:

jsx
const Hello = <Hello personal={true} />;

デフォルトの "never" モードで正しいコードの例:

jsx
const Hello = <Hello personal />;

const Foo = <Foo isSomething={false} />;

"always" モードで誤りなコードの例:

jsx
const Hello = <Hello personal />;

"always" モードで正しいコードの例:

jsx
const Hello = <Hello personal={true} />;

設定

1つ目のオプション

type: "always" | "never"

"always"

すべてのブール属性は明示的な値を持つ必要があります。

"never"

すべてのブール属性は true に設定された値を省略する必要があります。

2つ目のオプション

このオプションは以下のプロパティを持つオブジェクトです。

always

type: string[]

default: []

常に明示的なブール値を持つべき属性名のリスト。 主モードが "never" の場合にのみ必要です。

assumeUndefinedIsFalse

type: boolean

default: false

true に設定されている場合、prop={false} はそのプロパティが undefined であると同等と扱います。 "never" モードと組み合わせると、属性が完全に省略されることを強制します。

jsx
// "assumeUndefinedIsFalse": true の場合
<App foo={false} />; // 誤り
<App />; // 正しい

このオプションは "always" モードでは何も効果がありません。

never

type: string[]

default: []

明示的なブール値を持たないべき属性名のリスト。 主モードが "always" の場合にのみ必要です。

使用方法

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

json
{
  "plugins": ["react"],
  "rules": {
    "react/jsx-boolean-value": "error"
  }
}
bash
oxlint --deny react/jsx-boolean-value --react-plugin

参照