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

❌ Incorrect

<div>Greater than > sign</div>

<span>Double "quote" example</span>

<p>Single 'quote' example</p>

<div>Opening { brace</div>

Note: This will cause a syntax error as { starts a JSX expression.

<div>Closing } brace</div>

✅ Correct

<div>Greater than &gt; sign</div>

<div>Greater than {">"} sign</div>

<span>Double &quot;quote&quot; example</span>

<span>
  Double {'"'}quote{'"'} example
</span>

<p>Single &apos;quote&apos; example</p>

Or:

<p>Single &#39;quote&#39; example</p>

<p>
  Single {"'"}quote{"'"} example
</p>

<div>Closing {"}"} brace</div>

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

• React: JSX In Depth - String Literals
• MDN: HTML Entities

Equivalents in Other Linters

• Deno: jsx-no-unescaped-entities
• ESLint: react/no-unescaped-entities