Validate whitespace in and around the JSX opening and closing brackets (jsx-tag-spacing)

[feross]

Enforce or forbid spaces after the opening bracket, before the closing bracket of self-closing elements, and between the angle bracket and slash of JSX closing or self-closing elements.

{
  "closingSlash": "never",
  "beforeSelfClosing": "always",
  "afterOpening": "never"
}

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-tag-spacing.md

(Also, remove the deprecated jsx-space-before-closing rule which is already enabled, but superceded by jsx-tag-spacing which is more complete)

[cpsubrian]

Just updated and noticed that <TagName attr='value'/> is not allowed anymore. Personally I find that more readable than <TagName attr='value' />, especially in the context of indenting where the /> feels like its hanging out in the middle of nowhere.

<Wrapper>
  <TagName attr='value' />
</Wrapper>

Also it seems inconsistent to then allow <TagName attr='value></TagName>
Shouldn't it be <TagName attr='value' ></TagName>

[dcousens]

The hanging space did seem a bit odd, agreed with @cpsubrian . I personally hadn't thought about it.

edit: Actually, it seems like it is an XML convention

[feross]

This has actually been fixed for a while. Not sure what version it shipped in, but there's nothing to do here.