Prettier 06 🎨 Trailing Commas — none, es5, and all trade-offs - KandZ

⏱️ Estimated read: 9 min | |

The trailingComma option controls whether Prettier prints a comma after the last item in a multi-line list. The three values are not stylistic variations on the same idea; they represent different answers to the question “which syntax is valid in the target environment?” none removes every trailing comma, es5 adds them only where ES5 allows them (objects and arrays), and all adds them everywhere the language permits, including function arguments and parameter lists . The default changed to all in Prettier 3.0, which means a project that upgrades without configuring the option will see its function calls reformatted .

Quick How-To Guides & Fast FixesNeed a quick fix or step-by-step solution? Browse our fast answers on HowTo.KandZ.me:

Operating Systems CLI →Dev Environment Languages →Web Network Tools →Security Accounts →Security Access Tech →Device Phone Basics →Social Messaging →Digital Files Media →

This chapter covers the three values, the language features that determine which one is valid, the version-control argument that explains why all became the default, and the practical decision of which value a project should use based on its runtime and its team’s tolerance for diff noise.

Key point: all requires ES2017 or a transpiler that can lower trailing commas in function calls. If the target runtime does not support ES2017, all produces syntax errors in the output. The es5 value is the safe middle ground: it works in every JavaScript environment and still provides the version-control benefit for the most common multi-line structures.

Why the option has three values

The language evolution problem. Trailing commas were not always legal everywhere. They were legal in array literals from the beginning of JavaScript, added to object literals in ES5, and added to function parameter lists and calls in ES2017 . A formatter that adds a trailing comma to a function call produces syntax that fails in an ES5 environment. The three values exist because the answer depends on the target.

The version-control problem. The reason trailing commas exist as a convention is diff noise. Consider an object with two properties, a and b. Adding a third property c without a trailing comma requires changing the b line (to add a comma) and adding the c line. Git shows two changed lines. With a trailing comma already on the b line, adding c only adds a line, and Git shows one change . The reviewer does not have to check whether the b line’s content changed or only its punctuation.

The default-change problem. Prettier 2.0 changed the default from none to es5 . Prettier 3.0 changed it from es5 to all . A project that upgrades from Prettier 1 to 3 without touching the configuration will see every multi-line function call reformatted with trailing commas. The reformat is correct for the new default but may be a large, noisy diff that is unrelated to the code change that prompted the upgrade.

a. `none`: no trailing commas

The none value removes every trailing comma that Prettier would otherwise add. It is the most conservative option because the output is valid in every JavaScript environment, from ES3 onward.

{
  "trailingComma": "none"
}

An object with two properties is formatted without a comma after the second property. Adding a third property later requires editing the second property’s line to add the comma. The diff shows two changed lines instead of one .

The none value is appropriate for a project that targets an environment where trailing commas are not supported, or for a team that has decided the diff noise is acceptable in exchange for the cleanest possible output. It is also the value that a project must set explicitly after upgrading to Prettier 3 if the team does not want the new default.

b. `es5`: trailing commas where ES5 allows them

The es5 value adds a trailing comma after the last item in a multi-line object or array. It does not add a comma to function arguments or parameter lists, because those were not legal in ES5 .

{
  "trailingComma": "es5"
}

The output is valid in every environment that supports ES5, which includes every modern browser and every supported version of Node.js. It provides the version-control benefit for the most common multi-line structures: objects and arrays. It does not provide the benefit for function calls, because the comma would be invalid in an ES5 environment.

The es5 value was the default from Prettier 2.0 through 2.x . It is the safe middle ground: it works everywhere and provides most of the diff benefit. A project that targets modern browsers or Node.js but does not want to risk the function-call syntax can use es5 and never think about it again.

c. `all`: trailing commas everywhere possible

The all value adds a trailing comma after the last item in every multi-line list where the language permits it: objects, arrays, function arguments, function parameters, and import/export specifiers.

{
  "trailingComma": "all"
}

The output requires ES2017 for function calls and parameter lists. The Prettier documentation notes that this value “requires node 8 or a transform” . A project that targets an older environment must use a transpiler that can lower the syntax, or the output will fail to parse.

The all value provides the full version-control benefit. Adding a new argument to a function call, a new property to an object, or a new import to a list produces a single-line diff instead of a two-line diff. The reviewer sees only the addition, not the punctuation change on the previous line . This is why the Prettier team made it the default in 3.0 .

Complete Example Session

// ============================================
// PART 1: THE CONFIGURATION
// ============================================
{
  "trailingComma": "none"
}

// ============================================
// PART 2: `none` OUTPUT
// ============================================
const obj = {
  a: 1,
  b: 2
}

function call(arg1, arg2) {
  // ...
}

call(1, 2)

// ============================================
// PART 3: `es5` CONFIGURATION
// ============================================
{
  "trailingComma": "es5"
}

// ============================================
// PART 4: `es5` OUTPUT
// ============================================
const obj = {
  a: 1,
  b: 2,
}

function call(arg1, arg2) {
  // no trailing comma after arg2
}

call(1, 2) // no trailing comma after 2

// ============================================
// PART 5: `all` CONFIGURATION
// ============================================
{
  "trailingComma": "all"
}

// ============================================
// PART 6: `all` OUTPUT
// ============================================
const obj = {
  a: 1,
  b: 2,
}

function call(
  arg1,
  arg2, // trailing comma after arg2
) {
  // ...
}

call(
  1,
  2, // trailing comma after 2
)

// ============================================
// PART 7: THE DIFF EXAMPLE
// ============================================
// Before: adding a property without a trailing comma
const obj = {
  a: 1,
  b: 2
}
// After:
const obj = {
  a: 1,
  b: 2,
  c: 3
}
// Git shows the `b` line changed and the `c` line added.

// ============================================
// PART 8: THE DIFF WITH A TRAILING COMMA
// ============================================
// Before:
const obj = {
  a: 1,
  b: 2,
}
// After:
const obj = {
  a: 1,
  b: 2,
  c: 3,
}
// Git shows only the `c` line added.

// ============================================
// PART 9: THE SYNTAX ERROR
// ============================================
// With `all` and an ES5 target, this output fails:
call(
  1,
  2,
)
// ES5 does not allow a trailing comma in a function call.

// ============================================
// PART 10: THE UPGRADE DECISION
// ============================================
// Upgrading to Prettier 3 without config:
// The default changes from `es5` to `all`.
// Every multi-line function call is reformatted.
// Set the option explicitly if this is not wanted.

The ten parts covered the none configuration and output, the es5 configuration and output, the all configuration and output, the diff example, the diff with a trailing comma, the syntax error, and the upgrade decision.

Quick Reference

The three values

Value	Objects/Arrays	Function calls	Function params	Requires
`none`	No	No	No	Nothing
`es5`	Yes	No	No	ES5
`all`	Yes	Yes	Yes	ES2017 or transpiler

Version history

Prettier version	Default
1.x	`none`
2.x	`es5`
3.x	`all`

Language support

Structure	ES version
Array literal	ES1
Object literal	ES5
Function call	ES2017
Function parameter	ES2017

Diff behavior

Scenario	Lines changed
Add property without trailing comma	2 (previous line + new line)
Add property with trailing comma	1 (new line only)

Best Practices

✅ Do This:

// Set the option explicitly in every project
{
  "trailingComma": "es5"
}                                                            // ✅

// Use `all` for modern projects with a transpiler
{
  "trailingComma": "all"
}                                                            // ✅

# Commit the reformat as a separate commit after upgrading
git commit -m "chore: apply Prettier 3 trailing comma default" # ✅

❌ Don’t Do This:

// Assume the default is the same across versions
// No config means the default applies                   // ❌

// Use `all` without checking the target runtime
{
  "trailingComma": "all"
}  // fails in ES5 environments                               // ❌

# Mix the reformat with a feature change
git commit -m "feat: add login + reformat"                  // ❌

Common Pitfalls

Pitfall	Why It Happens	Fix
Function calls have trailing commas after upgrade	Prettier 3 default is `all`	Set `"trailingComma": "es5"` explicitly
Syntax error in old browser	`all` used without transpiler	Use `es5` or add a transpiler
Large unrelated diff	Default change reformatted the codebase	Commit the reformat separately
Diff still shows two lines	`none` or `es5` used for function calls	Use `all` if the runtime supports it

Real-World Examples

1. `none` config

{ "trailingComma": "none" }

2. `es5` config

{ "trailingComma": "es5" }

3. `all` config

{ "trailingComma": "all" }

4. `es5` output

const obj = { a: 1, b: 2, }

5. `all` output

call(1, 2,)

6. The diff benefit

Add property with trailing comma: 1 line changed.

7. The syntax error

ES5 target + `all`: function call trailing comma fails.

8. The upgrade

# Prettier 3 changes the default.
# Set the option explicitly to keep the old behavior.

9. The language feature

// ES2017 added trailing commas in function calls.

10. The safe choice

{ "trailingComma": "es5" } // works everywhere

Visual

The three values and their scope

┌─────────────────────────────────────────────────────────────┐
│  none                                                        │
│    const obj = { a: 1, b: 2 }                               │
│    call(1, 2)                                                │
│                                                              │
│  es5                                                         │
│    const obj = { a: 1, b: 2, }                              │
│    call(1, 2)                                                │
│                                                              │
│  all                                                         │
│    const obj = { a: 1, b: 2, }                              │
│    call(1, 2,)                                               │
└─────────────────────────────────────────────────────────────┘

The diff benefit

┌─────────────────────────────────────────────────────────────┐
│  WITHOUT TRAILING COMMA                                      │
│    -  b: 2                                                   │
│    +  b: 2,                                                  │
│    +  c: 3                                                   │
│    (2 lines changed)                                         │
│                                                              │
│  WITH TRAILING COMMA                                         │
│       b: 2,                                                  │
│    +  c: 3                                                   │
│    (1 line changed)                                          │
└─────────────────────────────────────────────────────────────┘

The version history

┌─────────────────────────────────────────────────────────────┐
│  Prettier 1.x: default `none`                                │
│  Prettier 2.x: default `es5`                                 │
│  Prettier 3.x: default `all`                                 │
│                                                              │
│  Upgrading without config changes the behavior.              │
└─────────────────────────────────────────────────────────────┘

The runtime requirement

┌─────────────────────────────────────────────────────────────┐
│  `all` requires ES2017 for function calls.                   │
│                                                              │
│  ES5 target:                                                 │
│    call(1, 2,) → SyntaxError                                 │
│                                                              │
│  With a transpiler:                                          │
│    call(1, 2,) → call(1, 2)                                 │
└─────────────────────────────────────────────────────────────┘

Summary

Item	Value
Option	`trailingComma`
Values	`none`, `es5`, `all`
`none` scope	No trailing commas anywhere
`es5` scope	Objects and arrays only
`all` scope	Everywhere possible, including function calls
`all` requirement	ES2017 or transpiler
Prettier 2 default	`es5`
Prettier 3 default	`all`
Diff benefit	`all` produces single-line additions

Key takeaways:

The three values correspond to three language versions. none works everywhere, es5 works in any ES5 environment, and all requires ES2017 for function calls and parameter lists . The choice is a target-runtime decision, not a stylistic one.
all is the Prettier 3 default. A project that upgrades without setting the option will see its function calls reformatted. Setting "trailingComma": "es5" explicitly preserves the Prettier 2 behavior .
The version-control benefit is the reason the option exists. A trailing comma on the last item means adding a new item produces a single-line diff instead of a two-line diff. The reviewer sees only the addition, not the punctuation change on the previous line .
es5 is the safe middle ground. It provides the diff benefit for objects and arrays, which are the most common multi-line structures, without requiring ES2017 for function calls.
all requires a transpiler for older targets. The Prettier documentation states that all “requires node 8 or a transform” . A project that targets ES5 must use es5 or add a transpilation step.
The upgrade reformat should be a separate commit. When the default changes, the reformat touches many files. Committing it separately from the feature work keeps the diff reviewable and allows the commit to be added to .git-blame-ignore-revs .

Remember: trailingComma is a decision about which syntax the target environment accepts. none accepts everything, es5 accepts objects and arrays, and all requires ES2017. The Prettier 3 default is all, which is correct for a modern project and wrong for a project that targets an older runtime without a transpiler. Set the option explicitly, commit the reformat separately if the default changes, and remember that the reason the option exists is not aesthetics—it is the version-control diff.

Was this helpful?

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!