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:

bunfig.toml

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

Every option, set to its default:

bunfig.toml

[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#

example.jsx4 problems

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

example.jsxNo problems

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"`.

example.jsxwith { "beforeSelfClosing": "never" }No problems

const small = <Avatar/>;

example.jsxwith { "beforeClosing": "never" }2 problems

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:

example.jsxwith { "beforeSelfClosing": "proportional-always" }1 problem

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

example.jsxwith { "beforeSelfClosing": "proportional-always" }No problems

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

example.jsxwith { "beforeClosing": "proportional-always" }1 problem

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

example.jsxwith { "beforeClosing": "proportional-always" }No problems

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.