react/jsx-newline

Require or disallow an empty line between JSX elements and expressions

fixable

Empty lines between siblings break up a long JSX tree. Some teams want them everywhere, and others want them nowhere. By default the rule requires an empty line before each element or {...} expression that follows another one.

--fix adds or removes the empty line.

Configure#

Off by default. To turn it on:

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

Every option, set to its default:

bunfig.toml
[lint.rules]
"react/jsx-newline" = ["error", {
  prevent = false,
  allowMultilines = false,
}]

Examples#

example.jsx2 problems
const page = (
  <main>
    <Header />
    <Content />
    {footer}
  </main>
);
example.jsxNo problems
const page = (
  <main>
    <Header />

    <Content />

    {footer}
  </main>
);

Options#

OptionDefaultWhat it does
preventfalseReport the empty lines instead of requiring them.
allowMultilinesfalseOnly works together with prevent. Still require an empty line before and after an element that takes several lines.

With prevent:

example.jsxwith { "prevent": true }1 problem
const page = (
  <main>
    <Header />

    <Content />
  </main>
);
example.jsxwith { "prevent": true }No problems
const page = (
  <main>
    <Header />
    <Content />
  </main>
);

With prevent and allowMultilines:

example.jsxwith { "prevent": true, "allowMultilines": true }No problems
const page = (
  <main>
    <Header />
    <Nav />

    <Content>
      <Article />
    </Content>

    <Footer />
  </main>
);
example.jsxwith { "prevent": true, "allowMultilines": true }1 problem
const page = (
  <main>
    <Header />
    <Content>
      <Article />
    </Content>
  </main>
);