react/jsx-newline - Aphrody Bun

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

Reported:

const page = (
  <main>
    <Header />
    <Content />
    {footer}
  </main>
);

Not reported:

const page = (
  <main>
    <Header />

    <Content />

    {footer}
  </main>
);

Options

Option	Default	What it does
`prevent`	`false`	Report the empty lines instead of requiring them.
`allowMultilines`	`false`	Only works together with `prevent`. Still require an empty line before and after an element that takes several lines.

With prevent:

const page = (
  <main>
    <Header />

    <Content />
  </main>
);

const page = (
  <main>
    <Header />
    <Content />
  </main>
);

With prevent and allowMultilines:

const page = (
  <main>
    <Header />
    <Nav />

    <Content>
      <Article />
    </Content>

    <Footer />
  </main>
);

const page = (
  <main>
    <Header />
    <Content>
      <Article />
    </Content>
  </main>
);