react/jsx-indent - Aphrody Bun

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.

Configure

Off by default. To turn it on:

bunfig.toml

[lint.rules]
"react/jsx-indent" = "error" # or "warn"

Examples

Reported:

const page = (
    <main>
      <Header />
            <p>Welcome</p>
    </main>
);

Not reported:

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.

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:

const page = (
  <Layout
    header={(
      <Header />
      )}
  />
);

const page = (
  <Layout
    header={(
      <Header />
    )}
  />
);

Without indentLogicalExpressions, both of these are allowed:

const page = (
  <main>
    {open &&
    <Menu />
    }
    {closed &&
      <Hint />
    }
  </main>
);

With it, only the second one is:

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.