noCommentText

Diagnostic Category: lint/suspicious/noCommentText

JSX and TSX

Since: v1.0.0

Note

• This rule is recommended by Biome. A diagnostic error will appear when linting your code.
• This rule has an unsafe fix.

Sources:

• Same as: react/jsx-no-comment-textnodes

Description

Prevent comments from being inserted as text nodes

Examples

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

<>
   <div>{/* comment */}</div>;
   <div>{/** comment */}</div>;
   <div className={"cls" /* comment */}></div>;
   <div>text {/* comment */}</div>;
   <div>{/* comment */} text</div>;
</>

How to configure

biome.json

{
  "linter": {
    "rules": {
      "suspicious": {
        "noCommentText": "error"
      }
    }
  }
}

Related links

• Disable a rule
• Configure the rule fix
• Rule options