react/no-unescaped-entities

A stray " or ' in JSX text is often a slip. A quote that was meant to end an attribute lands after the tag's >, and it shows up on the page.

If you do want the character, write it as an HTML entity, or put the text in a string inside braces. In an editor, the rule suggests the entities to replace it with.

Configure#

Off by default. To turn it on:

[lint.rules]
"react/no-unescaped-entities" = "error" # or "warn"

Every option, set to its default. The ones that are commented out are unset by default.

[lint.rules]
"react/no-unescaped-entities" = ["error", {
  # forbid = <list of strings or objects>,
}]

Examples#

const label = <label htmlFor="name">" Your name</label>;

const note = <p>Don't close this window.</p>;

const note = <p>Don&apos;t close this window.</p>;

const hint = <p>{"Don't close this window."}</p>;

Options#

> and } in JSX text are syntax errors, so you get a parsing error for them, not a report from this rule.

Each item in forbid is a single character, or an object with the character and the entities to suggest: { "char": "\"", "alternatives": ["""] }.

Here only " is forbidden. The two quotes are reported and the apostrophe isn't:

const note = <p>Don't press "Delete".</p>;

When not to use it#

In text with many apostrophes and quotes, the entities make the source hard to read. Leave the rule off there, or shorten forbid.