Rule proposal: Prevent stray syntax from ending up in front of users

[captbaritone]

JSX syntax makes it very easy to leave stray syntax behind while updating code. For example, say you have:

return <h1>Hello!</h1>;

And then realize you want to wrap it in some other element. You might accidentally end up with:

return (
  <Wrapper>
    <h1>Hello!</h1>;
  </Wrapper>
);

Which will leave a stray semicolon in your user-facing UI.

---

Does a rule already exist here, or elsewhere, to prevent that type of bug?

If not, I wrote one which looks like this:

const SUSPECT_STRINGS = new Set([';', '}', ')}', ');']);

module.exports = {
  create(context) {
    return {
      'JSXText, Literal'(node) {
        if (
          (node.type !== 'JSXText' && node._babelType !== 'JSXText') ||
          typeof node.value !== 'string'
        ) {
          return;
        }
        if (!SUSPECT_STRINGS.has(node.value.trim())) {
          return;
        }
        context.report({node, message: 'Possible JSX Cruft'});
      },
    };
  },
};

Which uncovered hundreds of issues in our large code base with relatively few false positives.

[ljharb]

I'm glad you had success with your rule; I'm very skeptical a heuristics-based approach will actually provide few false positives in a general sense (and any false positives are largely unacceptable for a lint rule).

There's legit use cases for having a prose semicolon appear after a jsx element.

[captbaritone]

Maybe another way to frame this rule would be, "These syntax fragments are known to be problematic, and therefore we require that they be written explicitly as string literals in order to avoid unintentionally including them in the UI". In that framing the rule becomes more stylistic ("We follow this convention in order to reduce the likelihood of this type of bug"), and can even be auto-fixable if you want. The main requirement, in my estimation, is that when editing a file, a user has the chance to have these issues pointed out to them so that they are not accidentally included.

So, in cases of a legit need for trailing semicolon (for example) you would just write it like so:

return (
  <Wrapper>
    <h1>Hello!</h1>{";"}
  </Wrapper>
);

Which clarifies to the reader, and the linter, that this semicolon is intentional.

[ljharb]

What other examples besides a semicolon would you have in mind?

[captbaritone]

From the implementation I provided above, you can see that we're currently linting for ;, }, )}, and );.

[captbaritone]

Anything I can do to help drive toward an outcome here? I believe this is could be a very impactful rule for the ecosystem.

[ljharb]

I’m willing to review test cases, if you’re willing to try some - docs and implementation are optional :-) i don’t want you to do unnecessary work if I’m not convinced, but it’s easiest to understand for me to review actual code.