ESLint 风格

外观

@stylistic/jsx/

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，则可以禁用此规则。

正确
不正确
正确
不正确