Eslint-plugin-react: Rule proposal: jsx-tag-spacing

[Jessidhia]

For some reason, / > is valid JSX, as is / followed by any kind of whitespace until the >. This rule would require that the self-closing terminator is always written as an atomic />.

Not having a check for this also allows for funny workarounds for jsx-closing-bracket-location, such as this (when using after-props):

<SomeComponent
  with='many'
  props='specified' /
>

Update: https://github.com/yannickcr/eslint-plugin-react/issues/693#issuecomment-234842584

[ljharb]

I'm a strong +1 on this - there should never be a space between / and > and I'm horrified that someone would ever come up with that.

[Jessidhia]

It also turns out that <Tag>< /Tag> is weird but valid JSX too, so I made the rule also check for this.

[ljharb]

Also </ Tag> ideally.

[Jessidhia]

I can implement that, but I think it should be a separate rule. This one concerns itself with space in the opener/closer itself, while the other rule would worry about whitespace between the opener and the component name (analogous to jsx-space-before-closing).

[Jessidhia]

Per discussion with @ljharb on the babel slack:

Merge this proposed rule with jsx-space-before-closing and a rule for checking space after opening, with a default schema like:

{
  closingSlash: 'never', // internal space between the "</" and "/>" tokens, e.g. "< /" would warn
  beforeClosing: 'always', // same thing as the current jsx-space-before-closing option
  afterOpening: 'never', // same thing as jsx-space-before-closing, but right after the "<" or "</"
}

afterOpening would also have an 'allow-multiline' suboption. Adding an 'allow-multiline' suboption to beforeClosing (and using it as default instead) is possible, but a stricter beforeClosing: 'always' would conflict with jsx-closing-bracket-location.

Each suboption would have an 'allow' suboption to disable the respective check.

[ljharb]

Let's also rename this rule to jsx-tag-spacing - and then we can deprecate jsx-space-before-closing and copy the tests over.

[Jessidhia]

Because jsx-space-before-closing only works on self-closing tags, I'll name the equivalent option beforeSelfClosing instead. A beforeClosing that applies to regular tags would conflict with jsx-closing-bracket-location.