react/jsx-closing-tag-location

Enforce that the closing tag of a multiline JSX element lines up with its opening tag

fixable

A closing tag at the end of the last line of content, or indented differently from its opening tag, makes it hard to see where an element ends. When an element spans several lines, this rule wants its closing tag on its own line, in the same column as the opening tag.

--fix moves the closing tag.

Configure#

Off by default. To turn it on:

bunfig.toml
[lint.rules]
"react/jsx-closing-tag-location" = "error" # or "warn"

Every option, set to its default:

bunfig.toml
[lint.rules]
# "tag-aligned" or "line-aligned"
"react/jsx-closing-tag-location" = ["error", "tag-aligned"]

Examples#

example.jsx1 problem
const card = (
  <Card>
    Welcome back</Card>
);
example.jsx1 problem
const card = (
  <Card>
    Welcome back
    </Card>
);
example.jsxNo problems
const card = (
  <Card>
    Welcome back
  </Card>
);

const small = <Card>Welcome back</Card>;

Options#

OptionWhat it does
"tag-aligned" (default)The closing tag is in the same column as the opening <.
"line-aligned"The closing tag is indented like the line that has the opening <.

{ "location": "line-aligned" } means the same as "line-aligned".

The two differ when the opening tag doesn't start its line:

example.jsxwith "line-aligned"No problems
const card = <Card>
  Welcome back
</Card>;
example.jsxwith "tag-aligned"1 problem
const card = <Card>
  Welcome back
</Card>;

When not to use it#

A formatter such as bun fmt or Prettier already decides where the closing tag goes.