react/jsx-tag-spacing

JSX allows spaces almost anywhere inside a tag, so <Avatar/>, <Avatar /> and < Avatar / > all mean the same thing. This rule picks one way to write them. By default that's <Avatar /> and </p>: a space before />, none after <, and none between / and the bracket next to it.

--fix adds or removes the spaces.

Configure

Off by default. To turn it on:

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

Every option, set to its default:

[lint.rules]
"react/jsx-tag-spacing" = ["error", {
  closingSlash = "never", # "always", "never" or "allow"
  # "always", "proportional-always", "never" or "allow"
  beforeSelfClosing = "always",
  afterOpening = "never", # "always", "allow-multiline", "never" or "allow"
  beforeClosing = "allow",
}]

Examples

Reported:

const small = <Avatar/>;
const medium = < Avatar />;
const large = <Avatar / >;
const label = <p>Profile< /p>;

Not reported:

const small = <Avatar />;
const label = <p>Profile</p>;

Options

Each option takes "always", "never" or "allow". "allow" turns that check off. Some take one more value.

Option	Default	What it checks
closingSlash	"never"	The space between / and > in />, and between < and / in </.
beforeSelfClosing	"always"	The space before />. Also takes "proportional-always".
afterOpening	"never"	The space after < and after </. Also takes "allow-multiline".
beforeClosing	"allow"	The space before the > of an opening or a closing tag. Also takes "proportional-always".

const small = <Avatar/>;

const label = <p >Profile</p >;

"allow-multiline" works like "never", except that it allows a line break after <.

With "proportional-always", a tag that spans several lines must have its /> or > on a separate line:

const avatar = (
  <Avatar
    src={photo}
    alt={name} />
);

const small = <Avatar src={photo} />;

const avatar = (
  <Avatar
    src={photo}
    alt={name}
  />
);

For a tag on one line, beforeSelfClosing then wants a space before />, and beforeClosing wants no space before >:

const label = <p className="label" >Profile</p>;

const label = <p className="label">Profile</p>;

const title = (
  <h1
    className="title"
    id="profile"
  >
    Profile
  </h1>
);

When not to use it

A formatter such as bun fmt or Prettier already fixes this spacing.