Skip to content
Flint
Blog

unescapedEntities

Disallow unescaped HTML entities in JSX text that may cause rendering issues.

✅ This rule is included in the jsx stylistic presets.

In JSX, certain characters have special meaning and should be properly escaped to avoid rendering issues or breaking the JSX syntax. Characters like >, ", ', and } should be escaped using HTML entities or wrapped in JSX expressions.

Unescaped entities can lead to unexpected rendering behavior or syntax errors in JSX. This rule helps prevent these issues by identifying characters that should be escaped.

Note that { in JSX text will automatically be parsed as the start of a JSX expression, so unmatched { characters will cause syntax errors rather than being flagged by this rule.

Examples

Section titled “Examples”
CE6dCsp ansty="le--0:#D6DEEB;--1:#403F">53Greater than > sisp>CA<E6dCd ivclassNa="meco">d>d>d>CE6spCsp ansty="le--0:#D6DEEB;--1:#403F">53Double "quote" exampsp>CA<E6spCd ivclassNa="meco">d>d>d>CE<6psp ansty="le--0:#7FDB">Csp ansty="le--0:#D6DEEB;--1:#403F">53Single 'quote' exampsp>CA<E<6psp ansty="le--0:#7FDB">Cd ivclassNa="meco">

d>

d>d>CE6dCsp ansty="le--0:#D6DEEB;--1:#403F">53Openinsp>3<4{sp ansty="le--0:#D6DEEB;--1:#403F">53 braAE<53dAd ivclassNa="meco">d>d>d>vpNote: This will cause a syntax error ato{ starts a JSX expressioCE6dCsp ansty="le--0:#D6DEEB;--1:#403F">53Closing } brasp>CA<E6dCd ivclassNa="meco">d>d>d>
<44AE spans="tyle--0:#7F">DECE<6div spans="tyle--0:#7F">D spans="tyle--0:#D6DEEB;--1:#40">3F53Greater t>61B0<> spans="tyle--0:#D6DEEB;--1:#40">3F53 <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">D spans="tyle--0:#D6DEEB;--1:#40">3F53Greater t>3<834{ spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4 spans="tyle--0:#D9F5DD;--1:#11">1><111" spans="tyle--0:#E2817F;--1:#B2">3<834} spans="tyle--0:#D6DEEB;--1:#40">3F53 <44AE spans="tyle--0:#7F">DBECE<6div spans="tyle--0:#7F">D
di><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6D spans="tyle--0:#D6DEEB;--1:#40">3F53Dou>61B0&q3F53q61B0&q3F53 exa<44AE spans="tyle--0:#7F">DBECE6Ddi><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6D3F<53 spans="tyle--0:#D6DEEB;--1:#40">3F53Dou3<834{ spans="tyle--0:#D9F5DD;--1:#11">1<111' spans="tyle--0:#ECC48D;--1:#98">41<111' spans="tyle--0:#E2817F;--1:#B2">3<834} spans="tyle--0:#D6DEEB;--1:#40">3F53q3<834{ spans="tyle--0:#D9F5DD;--1:#11">1<111' spans="tyle--0:#ECC48D;--1:#98">41<111' spans="tyle--0:#E2817F;--1:#B2">3<834} spans="tyle--0:#D6DEEB;--1:#40">3F53 exa<44AE spans="tyle--0:#7F">DBECE6Ddi><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DED spans="tyle--0:#D6DEEB;--1:#40">3F53Sin>61B0&a3F53q61B0&a3F53 exa<44AE spans="tyle--0:#7F">DBED<

di><>>div><44AE spans="tyle--0:#7F">DED spans="tyle--0:#D6DEEB;--1:#40">3F53Sin>61B0&<#39; spans="tyle--0:#D6DEEB;--1:#40">3F53q61B0&<#39; spans="tyle--0:#D6DEEB;--1:#40">3F53 exa<44AE spans="tyle--0:#7F">DBED<

<>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DED3F<53 spans="tyle--0:#D6DEEB;--1:#40">3F53Sin3<834{ spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">41<111" spans="tyle--0:#E2817F;--1:#B2">3<834} spans="tyle--0:#D6DEEB;--1:#40">3F53q3<834{ spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">41<111" spans="tyle--0:#E2817F;--1:#B2">3<834} spans="tyle--0:#D6DEEB;--1:#40">3F53 exa<44AE spans="tyle--0:#7F">DBED<

di><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE<6div spans="tyle--0:#7F">D spans="tyle--0:#D6DEEB;--1:#40">3F53Clos>3<834{ spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">41<111" spans="tyle--0:#E2817F;--1:#B2">3<834} spans="tyle--0:#D6DEEB;--1:#40">3F53 b<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 your JSX is being processed by a tool that automatically handles entity escaping, or if you’re working in a context where these characters don’t cause issues, you may want to disable this rule.

Further Reading

Section titled “Further Reading”

Equivalents in Other Linters

Section titled “Equivalents in Other Linters”