Skip to content
Biome
Docs Blog Playground

noCommentText

Diagnostic Category: lint/suspicious/noCommentText

Since: v1.0.0

Sources:

Prevent comments from being inserted as text nodes

Examples

Section titled Examples

Invalid

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>;
</>
Section titled Related links