Skip to content
Flint
Blog

commentTextNodes

Reports JSX text nodes that contain comment syntax but are rendered as text.

✅ This rule is included in the jsx logical and logicalStrict presets.

In JSX, text that looks like comments (// or /* */) is rendered as literal text unless it’s wrapped in braces. This can lead to confusion where developers think they’re adding comments, but the text actually appears in the rendered output.

To add actual comments in JSX, wrap them in braces: {/* comment */} or {// comment}.

Examples

Section titled “Examples”
<44AE spans="tyle--0:#7F">DECE<6div spans="tyle--0:#7F">D spans="tyle--0:#E2817F;--1:#B2">3><834{ spans="tyle--0:#919F9F;--1:#5F">636F/* This is an actual commen3<834} spans="tyle--1:#88"><44AE spans="tyle--0:#7F">DBECE<6div spans="tyle--0:#7F">D
<>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE<6div spans="tyle--0:#7F">Dde3<834{ spans="tyle--0:#919F9F;--1:#5F">636F/* Comment inside expressio3<834 }divclass="Nameec-">3F<53 spans="tyle--0:#D6DEEB;--1:#40">3F53Regular text con<44AE spans="tyle--0:#7F">DBECE<6div spans="tyle--0:#7F">D
di><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6Dde3<834 {divclass="Nameec-">dent< spans="tyle--0:#919F9F;--1:#5D">6376// Single line comde3<834 }divclass="Nameec-"><44AE spans="tyle--0:#7F">DBECE6Ddi><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE<6div spans="tyle--0:#7F">D spans="tyle--0:#D6DEEB;--1:#40">3F53Regular text without comment sy><44AE spans="tyle--0:#7F">DBECE<6div spans="tyle--0:#7F">D
di>

When Not To Use It

Section titled “When Not To Use It”

If you intentionally want to display text that looks like comments (for example, in a code tutorial or documentation site), you may want to disable this rule for those specific files.

Further Reading

Section titled “Further Reading”

Equivalents in Other Linters

Section titled “Equivalents in Other Linters”