react/jsx-curly-newline

Enforce consistent line breaks inside the curly braces of JSX expressions

fixable

A JSX expression can have a line break after its { and before its }. With a break on one side only, the braces no longer line up and the expression is harder to pick out. By default this rule wants a break on both sides or on neither.

It checks the braces around attribute values and children.

--fix adds or removes the line breaks.

Configure#

Off by default. To turn it on:

bunfig.toml
[lint.rules]
"react/jsx-curly-newline" = "error" # or "warn"

Every option, set to its default:

bunfig.toml
[lint.rules]
"react/jsx-curly-newline" = ["error", "consistent"] # "consistent" or "never"

Examples#

example.jsx1 problem
const list = (
  <ul>
    {items.map(item => <li key={item.id}>{item.name}</li>)
    }
  </ul>
);
example.jsxNo problems
const list = (
  <ul>
    {items.map(item => <li key={item.id}>{item.name}</li>)}
  </ul>
);

const same = (
  <ul>
    {
      items.map(item => <li key={item.id}>{item.name}</li>)
    }
  </ul>
);

Options#

OptionWhat it does
"consistent" (default)A line break on both sides or on neither.
"never"No line break after { or before }.
example.jsxwith "never"2 problems
const title = (
  <h1>
    {
      user.name
    }
  </h1>
);

The option can also be an object, with one setting for expressions that fit on one line and one for expressions that span several lines:

OptionDefaultWhat it does
singleline"consistent""consistent", "require" (a break on both sides), or "forbid" (no break).
multiline"consistent"The same three values.
example.jsxwith { "multiline": "require", "singleline": "forbid" }2 problems
const menu = (
  <nav>
    {isOpen && (
      <Menu />
    )}
  </nav>
);
example.jsxwith { "multiline": "require", "singleline": "forbid" }No problems
const menu = (
  <nav title={title}>
    {
      isOpen && (
        <Menu />
      )
    }
  </nav>
);

When not to use it#

A formatter such as bun fmt or Prettier already decides where these line breaks go.