noCommentText
Summary
Section titled Summary- Rule available since:
v1.0.0 - Diagnostic Category:
lint/suspicious/noCommentText - This rule is recommended, which means is enabled by default.
- This rule has an unsafe fix.
- The default severity of this rule is error.
- Sources:
- Same as
react/jsx-no-comment-textnodes
- Same as
Description
Section titled DescriptionPrevent comments from being inserted as text nodes
Examples
Section titled ExamplesInvalid
Section titled Invalid<div>// comment</div>;code-block.jsx:1:6 lint/suspicious/noCommentText FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Wrap comments inside children within braces.
> 1 │ <div>// comment</div>;
│ ^^^^^^^^^^
2 │
ℹ Unsafe fix: Wrap the comments with braces
1 │ - <div>//·comment</div>;
1 │ + <div>{/*·comment·*/}</div>;
2 2 │
<div>/* comment */</div>;code-block.jsx:1:6 lint/suspicious/noCommentText FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Wrap comments inside children within braces.
> 1 │ <div>/* comment */</div>;
│ ^^^^^^^^^^^^^
2 │
ℹ Unsafe fix: Wrap the comments with braces
1 │ <div>{/*·comment·*/}</div>;
│ + +
<div>/** comment */</div>;code-block.jsx:1:6 lint/suspicious/noCommentText FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Wrap comments inside children within braces.
> 1 │ <div>/** comment */</div>;
│ ^^^^^^^^^^^^^^
2 │
ℹ Unsafe fix: Wrap the comments with braces
1 │ <div>{/**·comment·*/}</div>;
│ + +
<div>text /* comment */</div>;code-block.jsx:1:11 lint/suspicious/noCommentText FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Wrap comments inside children within braces.
> 1 │ <div>text /* comment */</div>;
│ ^^^^^^^^^^^^^
2 │
ℹ Unsafe fix: Wrap the comments with braces
1 │ <div>text·{/*·comment·*/}</div>;
│ + +
<div>/* comment */ text</div>;code-block.jsx:1:6 lint/suspicious/noCommentText FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Wrap comments inside children within braces.
> 1 │ <div>/* comment */ text</div>;
│ ^^^^^^^^^^^^^
2 │
ℹ Unsafe fix: Wrap the comments with braces
1 │ <div>{/*·comment·*/}·text</div>;
│ + +
<div> text // comment</div>;code-block.jsx:3:5 lint/suspicious/noCommentText FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Wrap comments inside children within braces.
1 │ <div>
2 │ text
> 3 │ // comment
│ ^^^^^^^^^^
4 │ </div>;
5 │
ℹ Unsafe fix: Wrap the comments with braces
1 1 │ <div>
2 2 │ text
3 │ - ····//·comment
3 │ + ····{/*·comment·*/}
4 4 │ </div>;
5 5 │
<div> // comment text</div>;code-block.jsx:2:5 lint/suspicious/noCommentText FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Wrap comments inside children within braces.
1 │ <div>
> 2 │ // comment
│ ^^^^^^^^^^
3 │ text
4 │ </div>;
ℹ Unsafe fix: Wrap the comments with braces
1 1 │ <div>
2 │ - ····//·comment
2 │ + ····{/*·comment·*/}
3 3 │ text
4 4 │ </div>;
<div> /* comment */ text</div>;code-block.jsx:2:5 lint/suspicious/noCommentText FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Wrap comments inside children within braces.
1 │ <div>
> 2 │ /* comment */
│ ^^^^^^^^^^^^^
3 │ text
4 │ </div>;
ℹ Unsafe fix: Wrap the comments with braces
2 │ ····{/*·comment·*/}
│ + +
Valid
Section titled Valid<> <div>{/* comment */}</div>; <div>{/** comment */}</div>; <div className={"cls" /* comment */}></div>; <div>text {/* comment */}</div>; <div>{/* comment */} text</div>;</>How to configure
Section titled How to configure{ "linter": { "rules": { "suspicious": { "noCommentText": "error" } } }}