Proposal: Lint for entities appearing in JSX

[pfhayes]

Example:

<MyComponent
  name={name}
  type={"string"}
  foo=bar>  {/* oops! */}
  x=y>
  Body Text
</MyComponent>

Now, when this renders, the body text will be "x=y>Body Text". This is almost certainly not what the developer intended.

It seems like any > that appears in the body of a react tag is probably an error. If the user wants this they should do >, or perhaps {'>'}. We could go further and also suggest that other HTML special characters are replaced with the correct entities.

Is there already a rule for this? I'm happy to look into adding this.

[pfhayes]

Here is a PR: #681

[pfhayes]

Here is another potential error that this rule might catch (from the PR):

<MyComponent>
  {'Text'}}  {/* oops, there is an extra closing brace! */}
</MyComponent>

Any feedback on this rule? I think it is very useful and it has caught several subtle errors in my project, and would help others similarly

[alexzherdev]

Closed via #681?