@stylistic/jsx/

jsx-curly-newline

强制在 JSX 属性和表达式中的花括号中使用一致的换行符。

规则详细信息

此规则强制在 jsx 花括号表达式内的花括号中使用一致的换行符。

规则选项

此规则接受对象选项

{
  multiline: "consistent" | "forbid" | "require", // default to 'consistent'
  singleline: "consistent" | "forbid" | "require", // default to 'consistent'
}

当花括号内的 jsx 表达式占据多行时，选项 multiline 生效。

当花括号内的 jsx 表达式占据单行时，选项 singleline 生效。

• consistent 强制执行以下两种情况之一：所有花括号内都直接包含换行符，或者所有花括号内都不包含换行符。
• forbid 禁止在花括号内直接包含换行符。
• require 强制在花括号内直接包含换行符。

或一个字符串选项

• consistent（默认）是 { multiline: "consistent", singleline: "consistent" } 的别名。
• never 是 { multiline: "forbid", singleline: "forbid" } 的别名

或一个

consistent（默认）

当使用 consistent 或 { multiline: "consistent", singleline: "consistent" } 配置时，此规则的错误代码示例。

<div>
  { foo
  }
</div>

<div>
  {
    foo }
</div>

<div>
  { foo &&
    foo.bar
  }
</div>

此规则的正确代码示例

<div>
  { foo }
</div>

<div>
  {
    foo
  }
</div>

never

当使用 never 或 { multiline: "forbid", singleline: "forbid" } 配置时，此规则的错误代码示例。

<div>
  {
    foo &&
    foo.bar
  }
</div>

<div>
  {
    foo
  }
</div>

<div>
  { foo
  }
</div>

此规则的正确代码示例

<div>
  { foo &&
    foo.bar }
</div>

<div>
  { foo }
</div>

require

当使用 { multiline: "require", singleline: "require" } 配置时，此规则的错误代码示例。

<div>
  { foo &&
    foo.bar }
</div>

<div>
  { foo }
</div>

<div>
  { foo
  }
</div>

此规则的正确代码示例

<div>
  {
    foo &&
    foo.bar
  }
</div>

<div>
  {
    foo
  }
</div>

何时不使用它

如果您不关心 JSX 属性或表达式内填充换行的一致性，可以关闭此规则。