@stylistic/

jsx-function-call-newline

在 JSX 元素用作函数参数时，强制在 JSX 元素前后换行。

规则详情

此规则检查是否需要在用作函数参数的所有 JSX 元素前后添加换行符。以下是可能的配置

• always: 每个作为参数的 JSX 元素前后都有换行符。
• multiline(默认): 只有当 JSX 元素本身包含换行符时，才会在 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，则可以禁用此规则。

正确

错误

正确

错误