noCommentText (since v0.7.0)
This rule is recommended by Rome.
Prevent comments from being inserted as text nodes
Examples
Invalid
const a3 = <div>// comment</div>;
suspicious/noCommentText.js:1:17 lint/suspicious/noCommentText FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Wrap comments inside children within braces.
> 1 │ const a3 = <div>// comment</div>;
│ ^^^^^^^^^^
2 │
ℹ Suggested fix: Wrap the comments with braces
1 │ - const·a3·=·<div>//·comment</div>;
1 │ + const·a3·=·<div>{/*·comment*/}</div>;
2 2 │
const a4 = <div>/* comment */</div>;
suspicious/noCommentText.js:1:17 lint/suspicious/noCommentText FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Wrap comments inside children within braces.
> 1 │ const a4 = <div>/* comment */</div>;
│ ^^^^^^^^^^^^^
2 │
ℹ Suggested fix: Wrap the comments with braces
1 │ const·a4·=·<div>{/*·comment·*/}</div>;
│ + +
const a5 = <div>/** comment */</div>;
suspicious/noCommentText.js:1:17 lint/suspicious/noCommentText FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Wrap comments inside children within braces.
> 1 │ const a5 = <div>/** comment */</div>;
│ ^^^^^^^^^^^^^^
2 │
ℹ Suggested fix: Wrap the comments with braces
1 │ - const·a5·=·<div>/**·comment·*/</div>;
1 │ + const·a5·=·<div>{/*·comment·*/}</div>;
2 2 │
Valid
const a = <div>{/* comment */}</div>;
const a1 = <div>{/** comment */}</div>;
const a2 = <div className={"cls" /* comment */}></div>;