# react/jsx-newline

> Require or disallow an empty line between JSX elements and expressions

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.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

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

Every option, set to its default:

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

{/* End of the generated section. */}

## Examples

Reported:

{/* bad {"count": 2} */}
```jsx
const page = (
  <main>
    <Header />
    <Content />
    {footer}
  </main>
);
```

Not reported:

{/* good */}
```jsx
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`:

{/* bad {"options": [{"prevent": true}]} */}
```jsx
const page = (
  <main>
    <Header />

    <Content />
  </main>
);
```

{/* good {"options": [{"prevent": true}]} */}
```jsx
const page = (
  <main>
    <Header />
    <Content />
  </main>
);
```

With `prevent` and `allowMultilines`:

{/* good {"options": [{"prevent": true, "allowMultilines": true}]} */}
```jsx
const page = (
  <main>
    <Header />
    <Nav />

    <Content>
      <Article />
    </Content>

    <Footer />
  </main>
);
```

{/* bad {"options": [{"prevent": true, "allowMultilines": true}]} */}
```jsx
const page = (
  <main>
    <Header />
    <Content>
      <Article />
    </Content>
  </main>
);
```