react/jsx-closing-bracket-location

When a JSX tag's props are spread over several lines, the closing > or /> can end up in several places. This rule keeps it in one. By default the bracket goes on its own line, in the same column as the < that opens the tag.

If the tag has no props, or the tag and its last prop are on one line, the bracket must be on that line too, no matter what the options say.

--fix moves the bracket.

Configure

Off by default. To turn it on:

bunfig.toml

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

Every option, set to its default:

bunfig.toml

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

Examples

Reported:

const button = (
  <Button
    label="Save"
    onClick={save} />
);

const button = (
  <Button label="Save"
  />
);

const divider = (
  <Divider
  />
);

Not reported:

const button = (
  <Button
    label="Save"
    onClick={save}
  />
);

const small = <Button label="Save" />;

Options

bunfig.toml

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

Option	Where the bracket goes
`"tag-aligned"` (default)	On its own line, in the same column as the opening `<`.
`"line-aligned"`	On its own line, indented like the line that has the opening `<`.
`"props-aligned"`	On its own line, in the same column as the last prop.
`"after-props"`	On the same line as the last prop.

"line-aligned" differs from "tag-aligned" when the tag doesn't start its line:

const button = <Button
  label="Save"
  onClick={save}
/>;

const button = <Button
  label="Save"
  onClick={save}
/>;

const button = (
  <Button
    label="Save"
    onClick={save}
    />
);

const button = (
  <Button
    label="Save"
    onClick={save} />
);

{ "location": "line-aligned" } means the same as "line-aligned". An object can also give each kind of tag its own location:

Option	Default	What it does
`selfClosing`	`"tag-aligned"`	The location for tags that end in `/>`. `false` turns the check off for them.
`nonEmpty`	`"tag-aligned"`	The location for tags that have a closing tag. `false` turns the check off for them.

const form = (
  <Form
    onSubmit={save}
  >
    <Button
      label="Save" />
  </Form>
);

When not to use it

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