@stylistic/

jsx-curly-newline

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

规则详细信息

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

规则选项

此规则接受对象选项

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

选项 multiline 在花括号内的 jsx 表达式占用多行时生效。

选项 singleline 在花括号内的 jsx 表达式占用单行时生效。

• 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 或 { multiline: "forbid", singleline: "forbid" } 时，此规则的不正确代码示例。

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

<div>
  {
    foo
  }
</div>

<div>
  { foo
  }
</div>

此规则的正确代码示例

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

<div>
  { foo }
</div>

需要

当配置为 { multiline: "require", singleline: "require" } 时，此规则的不正确代码示例。

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

<div>
  { foo }
</div>

<div>
  { foo
  }
</div>

此规则的正确代码示例

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

<div>
  {
    foo
  }
</div>

何时不使用它

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