Proposal: Linting for missing spaces between tags

[pfhayes]

If your React markup looks like this:

<p>
  Here is a
  <a href="https://google.com>link</a>
  to Google
</p>

The whitespace will be collapsed and it will look like

Here is alinkto Google

Note that the whitespace is collapsed. The recommended solution from React is to write your code as

<p>
  Here is a
  {' '}
  <a href="https://google.com>link</a>
  {' '}
  to Google
</p>

which will render correctly.

It would be great if there was a lint rule that caught this.

• Does this already exist?
• Is this something desirable? I am happy to look into a PR

[ljharb]

I don't think a rule could catch this, because there's no guarantee that the user wants the space there - and in fact, they might not want it. That's why the best practice is to be explicit.

[pfhayes]

In my experience, it is very rare that the developer does not want the space. It is almost always indicative of an error that manifests as incorrectly rendered copy

In the case where the developer does not want the space, I would consider it reasonable to require that they be directly adjacent, as in

<p>
  Here is a<a href="https://google.com>link</a>to Google
</p>

Or when the line is long

<p>
  Here is a{/*
  */}<a href="https://google.com>link</a>{/*
  */}to Google
</p>

In general, as written originally the developer's intent is not clear. It appears as though they want some whitespace between the tags, but they may not

One could imagine a rule that forces you to be explicit always - that is, including {' '} when you want a space and a line continuation or comment when you want them adjacent

[ljharb]

It might not be safely autofixable at least; but sure, it'd be interesting to see the test cases in a PR.

[pfhayes]

Thanks - I added some illustrative test cases in #1519