ESLint 样式

外观

@stylistic/

jsx-newline ​

要求或阻止在 jsx 元素和表达式后换行

规则详细信息 ​

这是一个风格规则，旨在通过要求或阻止相邻 JSX 元素和表达式之间的行来使 JSX 代码更易读。

规则选项 ​

json5
...
"@stylistic/jsx/jsx-newline": [<enabled>, { "prevent": <boolean>, "allowMultilines": <boolean> }]
...
  • enabled: 用于启用规则。0=关闭，1=警告，2=错误。默认为 0。
  • prevent: 可选布尔值。如果为 true，则阻止相邻 JSX 元素和表达式之间的空行。默认为 false。
  • allowMultilines: 可选布尔值。如果为 true 并且 prevent 也等于 true，则允许在多行 JSX 元素和表达式后换行。默认为 false。

示例 ​

此规则的不正确代码示例，当配置为 { "prevent": false } 时

jsx
<div>
  <Button>{data.label}</Button>
  <List />
</div>
jsx
<div>
  <Button>{data.label}</Button>
  {showSomething === true && <Something />}
</div>
jsx
<div>
  {showSomething === true && <Something />}
  {showSomethingElse === true ? (
    <SomethingElse />
  ) : (
    <ErrorMessage />
  )}
</div>

此规则的正确代码示例，当配置为 { "prevent": false } 时

jsx
<div>
  <Button>{data.label}</Button>

  <List />

  <Button>
    <IconPreview />
    Button 2

    <span></span>
  </Button>

  {showSomething === true && <Something />}

  <Button>Button 3</Button>

  {showSomethingElse === true ? (
    <SomethingElse />
  ) : (
    <ErrorMessage />
  )}
</div>

此规则的不正确代码示例，当配置为 { "prevent": true } 时

jsx
<div>
  <Button>{data.label}</Button>

  <List />

  <Button>
    <IconPreview />
    Button 2

    <span></span>
  </Button>

  {showSomething === true && <Something />}

  <Button>Button 3</Button>

  {showSomethingElse === true ? (
    <SomethingElse />
  ) : (
    <ErrorMessage />
  )}
</div>

此规则的正确代码示例，当配置为 { "prevent": true } 时

jsx
<div>
  <Button>{data.label}</Button>
  <List />
</div>
jsx
<div>
  <Button>{data.label}</Button>
  {showSomething === true && <Something />}
</div>
jsx
<div>
  {showSomething === true && <Something />}
  {showSomethingElse === true ? (
    <SomethingElse />
  ) : (
    <ErrorMessage />
  )}
</div>

此规则的不正确代码示例，当配置为 { "prevent": true, "allowMultilines": true } 时

jsx
<div>
  {showSomething === true && <Something />}

  <Button>Button 3</Button>
  {showSomethingElse === true ? (
    <SomethingElse />
  ) : (
    <ErrorMessage />
  )}
</div>

当配置为 { "prevent": true, "allowMultilines": true } 时，此规则的正确代码示例。

jsx
<div>
  {showSomething === true && <Something />}

  <Button>Button 3</Button>

  {showSomethingElse === true ? (
    <SomethingElse />
  ) : (
    <ErrorMessage />
  )}
</div>

何时不使用它 ​

如果您不关心 JSX 元素和表达式之间的空格，可以关闭此规则。