# react/jsx-tag-spacing

> Enforce spacing around the `<`, `/` and `>` of JSX tags

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.

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

Every option, set to its default:

```toml 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",
}]
```

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

## Examples

Reported:

{/* bad {"count": 4} */}
```jsx
const small = <Avatar/>;
const medium = < Avatar />;
const large = <Avatar / >;
const label = <p>Profile< /p>;
```

Not reported:

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

{/* good {"options": [{"beforeSelfClosing": "never"}]} */}
```jsx
const small = <Avatar/>;
```

{/* bad {"options": [{"beforeClosing": "never"}], "count": 2} */}
```jsx
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:

{/* bad {"options": [{"beforeSelfClosing": "proportional-always"}]} */}
```jsx
const avatar = (
  <Avatar
    src={photo}
    alt={name} />
);
```

{/* good {"options": [{"beforeSelfClosing": "proportional-always"}]} */}
```jsx
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 `>`:

{/* bad {"options": [{"beforeClosing": "proportional-always"}]} */}
```jsx
const label = <p className="label" >Profile</p>;
```

{/* good {"options": [{"beforeClosing": "proportional-always"}]} */}
```jsx
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.