@stylistic/

jsx-function-call-newline

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

ルールの詳細

このルールは、関数引数として機能するすべてのJSX要素の前後に改行が必要かどうかをチェックします。可能な構成は次のとおりです。

• always: 引数としての各JSX要素には、その前後に改行があります。
• multiline(デフォルト): 要素自体の中に改行がある場合にのみ、JSX要素の前後に改行が追加されます。

このルールの不正なコードの例 ("always"で構成されている場合)

/* 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"で構成されている場合)

/* 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"で構成されている場合)

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

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

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

このルールの正しいコードの例 ("multiline"で構成されている場合)

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

fn(<div />)

fn(<span>foo</span>)

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

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

ルールオプション

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

使用しない場合

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

正しい

不正

正しい

不正