# react/jsx-indent

> Enforce consistent indentation of JSX elements and their children

Indentation shows which JSX element is inside which. A child at the wrong depth looks like its parent's sibling. The rule checks every tag, `{...}` child and line of text that starts a line. The default is 4 spaces for each level.

The rule doesn't check props. Use `react/jsx-indent-props` for those.

`--fix` corrects the indentation.

{/* 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-indent" = "error" # or "warn"
```

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

## Examples

Reported:

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

Not reported:

{/* good */}
```jsx
const page = (
    <main>
        <Header />
        <p>Welcome</p>
    </main>
);
```

## Options

The first option is the number of spaces for each level, or `"tab"` for one tab. The second is an object.

```toml bunfig.toml
[lint.rules]
"react/jsx-indent" = ["error", 2, { checkAttributes = true }]
```

| Option | Default | What it does |
| --- | --- | --- |
| a number or `"tab"` | `4` | The indentation for one level. |
| `checkAttributes` | `false` | Also check the closing `)}` of a prop's value that takes several lines. It must line up with the prop's name. |
| `indentLogicalExpressions` | `false` | Require an element on its own line after `&&`, `\|\|` or `??` to be indented one level. Without it, both ways are allowed. |

The examples below use `2`.

With `checkAttributes`:

{/* bad {"options": [2, {"checkAttributes": true}]} */}
```jsx
const page = (
  <Layout
    header={(
      <Header />
      )}
  />
);
```

{/* good {"options": [2, {"checkAttributes": true}]} */}
```jsx
const page = (
  <Layout
    header={(
      <Header />
    )}
  />
);
```

Without `indentLogicalExpressions`, both of these are allowed:

{/* good {"options": [2]} */}
```jsx
const page = (
  <main>
    {open &&
    <Menu />
    }
    {closed &&
      <Hint />
    }
  </main>
);
```

With it, only the second one is:

{/* bad {"count": 1, "options": [2, {"indentLogicalExpressions": true}]} */}
```jsx
const page = (
  <main>
    {open &&
    <Menu />
    }
    {closed &&
      <Hint />
    }
  </main>
);
```

## When not to use it

If `bun fmt` or another formatter lays out your code, it already decides the indentation.