@stylistic/

jsx-curly-newline

JSX属性と式の波括弧内の一貫した改行を強制します。

ルールの詳細

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

ルールのオプション

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

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

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

オプション singleline は、波括弧内のjsx式が単一行に収まる場合に有効になります。

• 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属性または式内のパディング改行の一貫性を気にしない場合は、このルールをオフにすることができます。