Prettier ConfigPrettier Config

quoteProps β€” when object keys get quoted, and the consistency option most people want

The Prettier Quote Props option

quoteProps controls when Prettier puts quotes around object property names. The default as-needed quotes only the keys that require it, which is minimal but can look ragged when one key in an object forces quotes; consistent is the value most teams settle on.

Change when properties in objects are quoted.
Prettier's own description, from the official options documentation
Default
"as-needed"
Type
choice
CLI flag
--quote-props
Allowed values
as-neededconsistentpreserve

What the three values do

  • as-needed (default) β€” quote a key only when it is not a valid identifier, such as user-id or a key with a space.
  • consistent β€” if any key in the object needs quotes, quote all of them.
  • preserve β€” leave exactly what you wrote, quoted or not.
// as-needed
const user = { name: 'Ada', 'user-id': 7 };

// consistent
const user = { 'name': 'Ada', 'user-id': 7 };
The same object under as-needed and consistent.

Why consistent is often the better choice

as-needed produces objects where quoting varies key by key, which reads as accidental even though it is deliberate. In an object of HTTP headers, CSS properties or analytics event names β€” where hyphens are the norm and a few keys happen to be valid identifiers β€” the mixed form is genuinely harder to scan than either extreme.

consistent decides per object rather than globally, so plain objects stay unquoted and only the ones that already contain an awkward key become fully quoted. That is usually what people mean when they say they want quoting to look intentional.

A number-key trap worth knowing

Numeric keys are the one case where quoting is not purely cosmetic in appearance. { 1: 'a' } and { '1': 'a' } are the same object β€” property names are strings either way β€” but Prettier is conservative about rewriting them, because in TypeScript the two can differ in how a type is inferred and in whether a numeric enum or index signature matches.

If you have an object keyed by numbers and the formatting seems not to follow your setting, this is why. Reach for preserve on that file if you need exact control.

The performance myth

There is a persistent belief that quoted keys are slower, or that they defeat some engine optimisation. They do not. Modern JavaScript engines normalise property names during parsing, and the quoting is gone long before any hidden-class machinery sees it. Choose on legibility alone.

Common mistakes

  • Assuming consistent quotes every object in the file. It only quotes objects that already contain a key needing quotes.
  • Expecting as-needed to strip quotes from numeric keys β€” Prettier is deliberately cautious there.
  • Confusing this with singleQuote, which picks the quote character rather than deciding whether to quote at all.
  • Leaving ESLint’s quote-props rule enabled alongside Prettier.

Use it in .prettierrc

Drop quoteProps into your Prettier config file:

{
  "quoteProps": "as-needed"
}
Try it in the generator

Worked examples

The same code formatted with each value of quoteProps.

quoteProps: as-needed, preserve

const user = {
  name: "Ada",
  "user-id": 7,
  roles: ["admin", "editor"],
  active: true,
};
const greet = (name) => `Hello ${name}`;
const label = user.active
  ? "active member of the team"
  : "inactive member of the team";
export function summarize(items) {
  return items
    .filter((i) => i.active)
    .map((i) => i.name)
    .join(", ");
}

quoteProps: consistent

const user = {
  "name": "Ada",
  "user-id": 7,
  "roles": ["admin", "editor"],
  "active": true,
};
const greet = (name) => `Hello ${name}`;
const label = user.active
  ? "active member of the team"
  : "inactive member of the team";
export function summarize(items) {
  return items
    .filter((i) => i.active)
    .map((i) => i.name)
    .join(", ");
}

Allowed values

as-needed
Only add quotes around object properties where required.
consistent
If at least one property in an object requires quotes, quote all properties.
preserve
Respect the input use of quotes in object properties.

Common questions

Which value should I use?
consistent suits most codebases: plain objects stay clean, and objects containing a hyphenated or awkward key become uniformly quoted instead of mixed.
Are quoted keys slower at runtime?
No. Property names are strings regardless, and engines discard the quoting at parse time. Pick on readability.
Why did Prettier not unquote my numeric key?
It is deliberately conservative with numeric keys, because in TypeScript the quoted and unquoted forms can affect inference and index-signature matching.

Other JavaScript options

Generated from Prettier 3.9.6.