jsxSingleQuote — quote style for JSX attributes, kept separate from your JavaScript strings

What the option does

The default is false, so JSX attributes use double quotes. Set it to true for single quotes. It governs attribute values only — the JavaScript inside a JSX expression container is formatted by singleQuote as normal.

const label = 'Save';

const button = (
  <button
    type="submit"
    aria-label={label}
  >
    {label}
  </button>
);

Why it is a separate option

JSX occupies an awkward middle ground. It is JavaScript syntactically, so one instinct is to format it like the surrounding code. But it is read as markup, and every reader arrives with years of HTML habit in which attributes are double-quoted.

Splitting the decision lets a codebase satisfy both: singleQuote: true for the JavaScript, jsxSingleQuote: false for the markup. That combination is the most common configuration in React projects and is worth adopting unless you have a reason not to.

Escaping behaves the same way

As with singleQuote, this is a preference rather than a rule. Prettier still minimises escaping, so an attribute value containing an apostrophe stays double-quoted even with jsxSingleQuote: true. A reviewer who flags that has found the intended behaviour, not a bug.

Common mistakes

• •Expecting singleQuote to change JSX attributes. It does not; that is this option.
• •Expecting this option to change the JavaScript inside { } expression containers. It does not; that is singleQuote.
• •Setting both to true and finding the markup looks unlike every HTML example your team has ever read.

Why HTML settled on double quotes

The convention JSX inherits is older than JSX. HTML has permitted unquoted, single-quoted and double-quoted attribute values since the beginning, but double quotes won decisively, and for a practical reason: attribute values frequently contain apostrophes, in ordinary English text such as alt="Ada's portrait". Single quotes would need escaping there constantly.

Because JSX attributes are read as markup, that habit carries across. A title or aria-label in a React component is prose as often as not, so the same argument that shaped HTML applies unchanged.

Linters and per-file overrides

ESLint's core jsx-quotes rule covers the same ground and will contradict this option if left enabled. eslint-config-prettier switches it off along with the rest of the stylistic set; put it last in your flat config so it wins.

If part of your codebase genuinely wants different behaviour — a design-system package with a different house style, say — scope it with an overrides block rather than splitting the setting across repositories:

{
  "singleQuote": true,
  "jsxSingleQuote": false,
  "overrides": [
    {
      "files": "packages/legacy-ui/**/*.jsx",
      "options": { "jsxSingleQuote": true }
    }
  ]
}

It governs attributes, not children

Only the quoted value of a JSX attribute is affected. Text between tags is a JSX text node, not a string literal, and has no quotes to choose. A quotation mark you type in visible text is a character in the content and stays exactly as written.

<button type="submit">
  She said "hello"
</button>

The same applies to string literals inside expression containers — those are ordinary JavaScript and follow singleQuote. In one line of JSX you can therefore have two different quote conventions in play, both correct.

Other template languages are not covered

Vue, Angular and Svelte templates are HTML rather than JSX, and Prettier formats their attributes as HTML — always double-quoted, with no option to change it. This setting applies to JSX and TSX files only.

That is worth knowing in a repository that mixes React with any of those, because setting jsxSingleQuote: true produces single quotes in the React components and leaves everything else double-quoted, which looks less consistent than leaving the default alone.