`jsx-function-call-newline`

関数の引数として使用されるとき、JSX要素の前後に改行を強制します。

ルールの詳細

このルールは、関数引数として使用されるすべてのJSX要素の前後に改行が必要かどうかを確認します。可能な設定があります。

always: 引数としての各JSX要素には、前後に行が改行されます。
multiline（デフォルト）：要素自体の中に改行が存在する場合にのみ、JSX要素の前後に改行が追加されます。

このルールについて不適切なコードの例（"always"で構成されている場合）

jsx

/* eslint @stylistic/jsx-function-call-newline: ["error", "always"] */

fn(<div />
)

fn(<span>foo</span>
)

fn(<span>

bar
</span>)

fn(<div />
, <div

  style={{ color: 'red' }}
  />, <p>baz</p>
)

このルールについて適切なコードの例（"always"で構成されている場合）

jsx

/* eslint @stylistic/jsx-function-call-newline: ["error", "always"] */

fn(
  <div />
)

fn(
  <span>foo</span>
)
fn(
  <span>
    bar
  </span>
)

fn(
  <div />,
  <div
    style={{ color: 'red' }}
  />,
  <p>baz</p>
)

このルールについて不適切なコードの例（"multiline"で構成されている場合）

jsx

/* eslint @stylistic/jsx-function-call-newline: ["error", "multiline"] */

fn(<div

 />, <span>

 foo</span>
)

fn (
  <div />, <span>

    bar
  </span>
)

このルールについて適切なコードの例（"multiline"で構成されている場合）

jsx

/* eslint @stylistic/jsx-function-call-newline: ["error", "multiline"] */

fn(<div />)

fn(<span>foo</span>)

fn(
  <div
 />,
 <span>
 foo</span>
)

fn (
  <div />,
  <span>
    bar
  </span>
)

ルールのオプション

jsx

"@stylistic/jsx/jsx-function-call-newline": "always" | "multiline"

使用しない場合

JSXを使用していない場合は、このルールを無効にすることができます。

正解

不正解

正解

不正解