no-comment-textnodes

Rule category

Suspicious.

What it does

Prevents comment strings (e.g. beginning with // or /*) from being accidentally inserted into the JSX element’s textnodes.

Why is this bad?

This could be a mistake during code editing or it could be a misunderstanding of how JSX works. Either way, it’s probably not what you intended.

Examples

Failing

import React from "react";
 
function function Example(): React.JSX.ElementExample() {
  return <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>// empty div</JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>;
  //          - Possible misused comment in text node. Comments inside children section of tag should be placed inside braces.
}
 
function function Example2(): React.JSX.ElementExample2() {
  return <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>/* empty div */</JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>;
  //          - Possible misused comment in text node. Comments inside children section of tag should be placed inside braces.
}

Passing

import React from "react";
 
function function Example(): React.JSX.ElementExample() {
  return <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>{/* empty div */}</JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>;
}

Legitimate uses

It’s possible you may want to legitimately output comment start characters (// or /*) in a JSX text node. In which case, you can do the following:

import React from "react";
 
function function Example(): React.JSX.ElementExample() {
  // @annotate: This is a legitimate use of comment strings in JSX textnodes
  return <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>{"/* This will be output as a text node */"}</JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>;
}

no-clone-element no-complicated-conditional-rendering