react/jsx-closing-tag-location

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:

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

Every option, set to its default:

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

Examples

Reported:

const card = (
  <Card>
    Welcome back</Card>
);

const card = (
  <Card>
    Welcome back
    </Card>
);

Not reported:

const card = (
  <Card>
    Welcome back
  </Card>
);

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

Options

Option	What 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:

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

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.