# react/jsx-closing-tag-location

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

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.

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

Every option, set to its default:

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

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

## Examples

Reported:

{/* bad */}
```jsx
const card = (
  <Card>
    Welcome back</Card>
);
```

{/* bad */}
```jsx
const card = (
  <Card>
    Welcome back
    </Card>
);
```

Not reported:

{/* good */}
```jsx
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:

{/* good {"options": ["line-aligned"]} */}
```jsx
const card = <Card>
  Welcome back
</Card>;
```

{/* bad {"options": ["tag-aligned"]} */}
```jsx
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.