enforce the consistent use of either double or single quotes in JSX attributes (jsx-quotes)

The --fix option on the command line can automatically fix some of the problems reported by this rule.

JSX attribute values can contain string literals, which are delimited with single or double quotes.

<a b='c' />
<a b="c" />

Unlike string literals in JavaScript, string literals within JSX attributes can’t contain escaped quotes. If you want to have e.g. a double quote within a JSX attribute value, you have to use single quotes as string delimiter.

<a b="'" />
<a b='"' />

Rule Details

This rule enforces the consistent use of either double or single quotes in JSX attributes.

Options

This rule has a string option:

• "prefer-double" (default) enforces the use of double quotes for all JSX attribute values that don’t contain a double quote.
• "prefer-single" enforces the use of single quotes for all JSX attribute values that don’t contain a single quote.

prefer-double

Examples of incorrect code for this rule with the default "prefer-double" option:

/*eslint jsx-quotes: ["error", "prefer-double"]*/

<a b='c' />

Examples of correct code for this rule with the default "prefer-double" option:

/*eslint jsx-quotes: ["error", "prefer-double"]*/

<a b="c" />
<a b='"' />

prefer-single

Examples of incorrect code for this rule with the "prefer-single" option:

/*eslint jsx-quotes: ["error", "prefer-single"]*/

<a b="c" />

Examples of correct code for this rule with the "prefer-single" option:

/*eslint jsx-quotes: ["error", "prefer-single"]*/

<a b='c' />
<a b="'" />

When Not To Use It

You can turn this rule off if you don’t use JSX or if you aren’t concerned with a consistent usage of quotes within JSX attributes.

Related Rules

• quotes

Version

This rule was introduced in ESLint 1.4.0.

Resources

• Rule source
• Documentation source