ESLint 风格

外观

@stylistic/jsx/

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 元素和表达式之间的间距，则可以关闭此规则。