react/jsx-one-expression-per-line

When tags, text and expressions share a line, it's hard to see how many children an element has, and changing one of them shows up in a diff as a change to all of them. This rule puts every child on its own line, along with the opening and closing tags around it.

--fix adds the line breaks. Where a space between two children matters, it writes {' '} to keep it.

Configure#

Off by default. To turn it on:

bunfig.toml

[lint.rules]
"react/jsx-one-expression-per-line" = "error" # or "warn"

Every option, set to its default. The ones that are commented out are unset by default.

bunfig.toml

[lint.rules]
"react/jsx-one-expression-per-line" = ["error", {
  # allow = <"none", "literal", "single-child" or "non-jsx">,
}]

Examples#

example.jsx1 problem

const greeting = <p>Hello</p>;

example.jsx2 problems

const greeting = (
  <p>
    Hello <b>{name}</b>
  </p>
);

example.jsxNo problems

const greeting = (
  <p>
    Hello
    {" "}
    <b>
      {name}
    </b>
  </p>
);

Options#

allow is the only option:

`allow`	What it does
`"none"` (default)	Every child goes on its own line.
`"literal"`	Allow an element on one line if its only child is text.
`"single-child"`	Allow an element on one line if it has only one child, of any kind.
`"non-jsx"`	Allow any layout in an element that has no elements as children.

example.jsxwith { "allow": "literal" }No problems

const greeting = <p>Hello</p>;

example.jsxwith { "allow": "literal" }1 problem

const greeting = <p>{message}</p>;

example.jsxwith { "allow": "single-child" }No problems

const greeting = <p>{message}</p>;
const wrapped = <p><b /></p>;

example.jsxwith { "allow": "non-jsx" }No problems

const greeting = <p>Hello {name}, you have {count} messages</p>;

When not to use it#

A formatter such as bun fmt or Prettier decides where JSX breaks, and it doesn't agree with this rule. Use one or the other.