react/jsx-indent

Enforce consistent indentation of JSX elements and their children

fixable

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#

example.jsx2 problems
const page = (
    <main>
      <Header />
            <p>Welcome</p>
    </main>
);
example.jsxNo problems
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 }]
OptionDefaultWhat it does
a number or "tab"4The indentation for one level.
checkAttributesfalseAlso check the closing )} of a prop's value that takes several lines. It must line up with the prop's name.
indentLogicalExpressionsfalseRequire 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:

example.jsxwith 2, { "checkAttributes": true }1 problem
const page = (
  <Layout
    header={(
      <Header />
      )}
  />
);
example.jsxwith 2, { "checkAttributes": true }No problems
const page = (
  <Layout
    header={(
      <Header />
    )}
  />
);

Without indentLogicalExpressions, both of these are allowed:

example.jsxwith 2No problems
const page = (
  <main>
    {open &&
    <Menu />
    }
    {closed &&
      <Hint />
    }
  </main>
);

With it, only the second one is:

example.jsxwith 2, { "indentLogicalExpressions": true }1 problem
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.