@stylistic/jsx/

jsx-curly-newline

JSX属性と式における中括弧内の改行の一貫性を強制します。

ルール詳細

このルールは、jsxの中括弧式内の改行の一貫性を強制します。

ルールオプション

このルールは、オブジェクトオプションを受け入れます。

{
  multiline: "consistent" | "forbid" | "require", // default to 'consistent'
  singleline: "consistent" | "forbid" | "require", // default to 'consistent'
}

オプション`multiline`は、中括弧内のjsx式が複数行にわたる場合に有効になります。

オプション`singleline`は、中括弧内のjsx式が1行のみの場合に有効になります。

• `consistent`は、両方の波括弧の中に改行があるか、改行がないかのいずれかを強制します。
• `forbid`は、波括弧内の改行を禁止します。
• `require`は、波括弧内の改行を強制します。

または文字列オプション

• `consistent` (デフォルト) は`{ multiline: "consistent", singleline: "consistent" }`のエイリアスです。
• `never`は`{ multiline: "forbid", singleline: "forbid" }`のエイリアスです。

または

consistent (デフォルト)

`consistent`または `{ multiline: "consistent", singleline: "consistent" }`で設定した場合の、このルールに違反するコードの例

<div>
  { foo
  }
</div>

<div>
  {
    foo }
</div>

<div>
  { foo &&
    foo.bar
  }
</div>

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

<div>
  { foo }
</div>

<div>
  {
    foo
  }
</div>

never

`never`または `{ multiline: "forbid", singleline: "forbid" }`で設定した場合の、このルールに違反するコードの例

<div>
  {
    foo &&
    foo.bar
  }
</div>

<div>
  {
    foo
  }
</div>

<div>
  { foo
  }
</div>

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

<div>
  { foo &&
    foo.bar }
</div>

<div>
  { foo }
</div>

require

`{ multiline: "require", singleline: "require" }`で設定した場合の、このルールに違反するコードの例

<div>
  { foo &&
    foo.bar }
</div>

<div>
  { foo }
</div>

<div>
  { foo
  }
</div>

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

<div>
  {
    foo &&
    foo.bar
  }
</div>

<div>
  {
    foo
  }
</div>

使用しない場合

JSX属性や式内のパディング改行の一貫性を気にしない場合は、このルールを無効にできます。