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.- 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 asuser-idor 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 };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
consistentquotes every object in the file. It only quotes objects that already contain a key needing quotes. - Expecting
as-neededto 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-propsrule enabled alongside Prettier.
Use it in .prettierrc
Drop quoteProps into your Prettier config file:
{
"quoteProps": "as-needed"
}Try it in the generatorWorked 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?
consistentsuits 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.