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#

example.jsx1 problem

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

example.jsx2 problems

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

const divider = (
  <Divider
  />
);

example.jsxNo problems

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:

example.jsxwith "line-aligned"No problems

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

example.jsxwith "tag-aligned"1 problem

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

example.jsxwith "props-aligned"No problems

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

example.jsxwith "after-props"No problems

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.

example.jsxwith { "selfClosing": "after-props", "nonEmpty": "tag-aligned" }No problems

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.