Change default value of trailingComma to "all" (prettier#11479)

medikoo · Jan 16, 2024 · 78216db · 78216db
1 parent aba5872
commit 78216db
Show file tree

Hide file tree

Showing 154 changed files with 2,262 additions and 1,147 deletions.
diff --git a/changelog_unreleased/javascript/13143.md b/changelog_unreleased/javascript/13143.md
@@ -0,0 +1,7 @@
+#### [BREAKING] Change the default value for `trailingComma` to `all` (#11479 by @fisker, #13143 by @sosukesuzuki)
+
+Since version 2.0. we've changed the default value for `trailingComma` to `es5`.
+
+[Internet Explorer, the last browser to not allow trailing commas in function calls, has been unsupported on June 15, 2022.](https://docs.microsoft.com/en-us/lifecycle/announcements/internet-explorer-11-end-of-support) Accordingly, change the default value for `trailingComma` to `all`.
+
+If the old behavior is still preferred, please configure Prettier with `{ "trailingComma": "es5" }`.
diff --git a/docs/options.md b/docs/options.md
@@ -114,19 +114,19 @@ Use single quotes instead of double quotes in JSX.
 
 ## Trailing Commas
 
-_Default value changed from `none` to `es5` in v2.0.0_
+_Default value changed from `es5` to `all` in v3.0.0_
 
 Print trailing commas wherever possible in multi-line comma-separated syntactic structures. (A single-line array, for example, never gets trailing commas.)
 
 Valid options:
 
+- `"all"` - Trailing commas wherever possible (including [function parameters and calls](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Trailing_commas#Trailing_commas_in_functions)). To run, JavaScript code formatted this way needs an engine that supports ES2017 (Node.js 8+ or a modern browser) or [downlevel compilation](https://babeljs.io/docs/en/index). This also enables trailing commas in type parameters in TypeScript (supported since TypeScript 2.7 released in January 2018).
 - `"es5"` - Trailing commas where valid in ES5 (objects, arrays, etc.). No trailing commas in type parameters in TypeScript.
 - `"none"` - No trailing commas.
-- `"all"` - Trailing commas wherever possible (including [function parameters and calls](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Trailing_commas#Trailing_commas_in_functions)). To run, JavaScript code formatted this way needs an engine that supports ES2017 (Node.js 8+ or a modern browser) or [downlevel compilation](https://babeljs.io/docs/en/index). This also enables trailing commas in type parameters in TypeScript (supported since TypeScript 2.7 released in January 2018).
 
 | Default | CLI Override                                           | API Override                                           |
 | ------- | ------------------------------------------------------ | ------------------------------------------------------ |
-| `"es5"` | <code>--trailing-comma <es5&#124;none&#124;all></code> | <code>trailingComma: "<es5&#124;none&#124;all>"</code> |
+| `"all"` | <code>--trailing-comma <all&#124;es5&#124;none></code> | <code>trailingComma: "<all&#124;es5&#124;none>"</code> |
 
 ## Bracket Spacing
 

diff --git a/src/language-js/options.js b/src/language-js/options.js
@@ -80,20 +80,21 @@ const options = {
       { since: "0.0.0", value: false },
       { since: "0.19.0", value: "none" },
       { since: "2.0.0", value: "none" },
+      { since: "3.0.0", value: "none" },
     ],
     description: "Print trailing commas wherever possible when multi-line.",
     choices: [
       {
-        value: "es5",
+        value: "all",
         description:
-          "Trailing commas where valid in ES5 (objects, arrays, etc.)",
+          "Trailing commas wherever possible (including function arguments).",
       },
-      { value: "none", description: "No trailing commas." },
       {
-        value: "all",
+        value: "es5",
         description:
-          "Trailing commas wherever possible (including function arguments).",
+          "Trailing commas where valid in ES5 (objects, arrays, etc.)",
       },
+      { value: "none", description: "No trailing commas." },
     ],
   },
   singleAttributePerLine: commonOptions.singleAttributePerLine,

diff --git a/tests/format/angular/angular/__snapshots__/jsfmt.spec.js.snap b/tests/format/angular/angular/__snapshots__/jsfmt.spec.js.snap
@@ -153,11 +153,11 @@ printWidth: 1
 ================================================================================
 `;
 
-exports[`angularjs.html - {"trailingComma":"none"} format 1`] = `
+exports[`angularjs.html - {"trailingComma":"es5"} format 1`] = `
 ====================================options=====================================
 parsers: ["angular"]
 printWidth: 80
-trailingComma: "none"
+trailingComma: "es5"
                                                                                 | printWidth
 =====================================input======================================
 <div ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading">Warning!</div>
@@ -194,10 +194,11 @@ trailingComma: "none"
 ================================================================================
 `;
 
-exports[`angularjs.html format 1`] = `
+exports[`angularjs.html - {"trailingComma":"none"} format 1`] = `
 ====================================options=====================================
 parsers: ["angular"]
 printWidth: 80
+trailingComma: "none"
                                                                                 | printWidth
 =====================================input======================================
 <div ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading">Warning!</div>
@@ -281,11 +282,11 @@ printWidth: 1
 ================================================================================
 `;
 
-exports[`attr-name.component.html - {"trailingComma":"none"} format 1`] = `
+exports[`attr-name.component.html - {"trailingComma":"es5"} format 1`] = `
 ====================================options=====================================
 parsers: ["angular"]
 printWidth: 80
-trailingComma: "none"
+trailingComma: "es5"
                                                                                 | printWidth
 =====================================input======================================
 <div someDirective itemType="x"></div>
@@ -296,10 +297,11 @@ trailingComma: "none"
 ================================================================================
 `;
 
-exports[`attr-name.component.html format 1`] = `
+exports[`attr-name.component.html - {"trailingComma":"none"} format 1`] = `
 ====================================options=====================================
 parsers: ["angular"]
 printWidth: 80
+trailingComma: "none"
                                                                                 | printWidth
 =====================================input======================================
 <div someDirective itemType="x"></div>
@@ -1448,11 +1450,11 @@ printWidth: 1
 ================================================================================
 `;
 
-exports[`attributes.component.html - {"trailingComma":"none"} format 1`] = `
+exports[`attributes.component.html - {"trailingComma":"es5"} format 1`] = `
 ====================================options=====================================
 parsers: ["angular"]
 printWidth: 80
-trailingComma: "none"
+trailingComma: "es5"
                                                                                 | printWidth
 =====================================input======================================
 <div
@@ -1717,10 +1719,11 @@ trailingComma: "none"
 ================================================================================
 `;
 
-exports[`attributes.component.html format 1`] = `
+exports[`attributes.component.html - {"trailingComma":"none"} format 1`] = `
 ====================================options=====================================
 parsers: ["angular"]
 printWidth: 80
+trailingComma: "none"
                                                                                 | printWidth
 =====================================input======================================
 <div
@@ -2343,11 +2346,11 @@ printWidth: 1
 ================================================================================
 `;
 
-exports[`first-lf.component.html - {"trailingComma":"none"} format 1`] = `
+exports[`first-lf.component.html - {"trailingComma":"es5"} format 1`] = `
 ====================================options=====================================
 parsers: ["angular"]
 printWidth: 80
-trailingComma: "none"
+trailingComma: "es5"
                                                                                 | printWidth
 =====================================input======================================
 <textarea>{{ generatedDiscountCodes }}</textarea>
@@ -2436,10 +2439,11 @@ trailingComma: "none"
 ================================================================================
 `;
 
-exports[`first-lf.component.html format 1`] = `
+exports[`first-lf.component.html - {"trailingComma":"none"} format 1`] = `
 ====================================options=====================================
 parsers: ["angular"]
 printWidth: 80
+trailingComma: "none"
                                                                                 | printWidth
 =====================================input======================================
 <textarea>{{ generatedDiscountCodes }}</textarea>
@@ -2728,11 +2732,11 @@ printWidth: 1
 ================================================================================
 `;
 
-exports[`ignore-attribute.component.html - {"trailingComma":"none"} format 1`] = `
+exports[`ignore-attribute.component.html - {"trailingComma":"es5"} format 1`] = `
 ====================================options=====================================
 parsers: ["angular"]
 printWidth: 80
-trailingComma: "none"
+trailingComma: "es5"
                                                                                 | printWidth
 =====================================input======================================
 <div
@@ -2787,10 +2791,11 @@ trailingComma: "none"
 ================================================================================
 `;
 
-exports[`ignore-attribute.component.html format 1`] = `
+exports[`ignore-attribute.component.html - {"trailingComma":"none"} format 1`] = `
 ====================================options=====================================
 parsers: ["angular"]
 printWidth: 80
+trailingComma: "none"
                                                                                 | printWidth
 =====================================input======================================
 <div
@@ -3556,11 +3561,11 @@ printWidth: 1
 ================================================================================
 `;
 
-exports[`interpolation.component.html - {"trailingComma":"none"} format 1`] = `
+exports[`interpolation.component.html - {"trailingComma":"es5"} format 1`] = `
 ====================================options=====================================
 parsers: ["angular"]
 printWidth: 80
-trailingComma: "none"
+trailingComma: "es5"
                                                                                 | printWidth
 =====================================input======================================
 <div>{{ a | b : c }}</div>
@@ -3723,10 +3728,11 @@ trailingComma: "none"
 ================================================================================
 `;
 
-exports[`interpolation.component.html format 1`] = `
+exports[`interpolation.component.html - {"trailingComma":"none"} format 1`] = `
 ====================================options=====================================
 parsers: ["angular"]
 printWidth: 80
+trailingComma: "none"
                                                                                 | printWidth
 =====================================input======================================
 <div>{{ a | b : c }}</div>
@@ -10504,11 +10510,11 @@ can be found in the LICENSE file at http://angular.io/license
 ================================================================================
 `;
 
-exports[`real-world.component.html - {"trailingComma":"none"} format 1`] = `
+exports[`real-world.component.html - {"trailingComma":"es5"} format 1`] = `
 ====================================options=====================================
 parsers: ["angular"]
 printWidth: 80
-trailingComma: "none"
+trailingComma: "es5"
                                                                                 | printWidth
 =====================================input======================================
 <!-- copied from: https://stackblitz.com/angular/ymdjlgmlavo -->
@@ -12031,10 +12037,11 @@ can be found in the LICENSE file at http://angular.io/license
 ================================================================================
 `;
 
-exports[`real-world.component.html format 1`] = `
+exports[`real-world.component.html - {"trailingComma":"none"} format 1`] = `
 ====================================options=====================================
 parsers: ["angular"]
 printWidth: 80
+trailingComma: "none"
                                                                                 | printWidth
 =====================================input======================================
 <!-- copied from: https://stackblitz.com/angular/ymdjlgmlavo -->
@@ -13601,11 +13608,11 @@ printWidth: 1
 ================================================================================
 `;
 
-exports[`tag-name.component.html - {"trailingComma":"none"} format 1`] = `
+exports[`tag-name.component.html - {"trailingComma":"es5"} format 1`] = `
 ====================================options=====================================
 parsers: ["angular"]
 printWidth: 80
-trailingComma: "none"
+trailingComma: "es5"
                                                                                 | printWidth
 =====================================input======================================
 <Table></Table>
@@ -13616,10 +13623,11 @@ trailingComma: "none"
 ================================================================================
 `;
 
-exports[`tag-name.component.html format 1`] = `
+exports[`tag-name.component.html - {"trailingComma":"none"} format 1`] = `
 ====================================options=====================================
 parsers: ["angular"]
 printWidth: 80
+trailingComma: "none"
                                                                                 | printWidth
 =====================================input======================================
 <Table></Table>

diff --git a/tests/format/angular/angular/jsfmt.spec.js b/tests/format/angular/angular/jsfmt.spec.js
@@ -1,5 +1,5 @@
 run_spec(import.meta, ["angular"], { trailingComma: "none" });
-run_spec(import.meta, ["angular"]);
+run_spec(import.meta, ["angular"], { trailingComma: "es5" });
 run_spec(import.meta, ["angular"], { printWidth: 1 });
 run_spec(import.meta, ["angular"], { htmlWhitespaceSensitivity: "ignore" });
 run_spec(import.meta, ["angular"], { bracketSpacing: false });
diff --git a/tests/format/flow-repo/annot/__snapshots__/jsfmt.spec.js.snap b/tests/format/flow-repo/annot/__snapshots__/jsfmt.spec.js.snap
@@ -110,7 +110,7 @@ function param_anno(n: number): void {
 // another error on param UB, more typical of www (mis)use-cases
 // this one cribbed from API.atlas.js
 function param_anno2(
-  batchRequests: Array<{ method: string, path: string, params: ?Object }>
+  batchRequests: Array<{ method: string, path: string, params: ?Object }>,
 ): void {
   // error below, since we're assigning elements to batchRequests
   // which lack a path property.
@@ -308,7 +308,7 @@ declare function foldr<A, B>(fn: (a: A, b: B) => B, b: B, as: A[]): B;
 function insertMany<K, V>(
   merge: Merge<V>,
   vs: [K, V][],
-  m: Map<K, V>
+  m: Map<K, V>,
 ): Map<K, V> {
   function f([k, v]: [K, V], m: Map<K, V>): Map<K, V> {
     return m.insertWith(merge, k, v);

diff --git a/tests/format/flow-repo/arrows/__snapshots__/jsfmt.spec.js.snap b/tests/format/flow-repo/arrows/__snapshots__/jsfmt.spec.js.snap
@@ -54,7 +54,7 @@ function selectBestEffortImageForWidth(
 =====================================output=====================================
 function selectBestEffortImageForWidth(
   maxWidth: number,
-  images: Array<Image>
+  images: Array<Image>,
 ): Image {
   var maxPixelWidth = maxWidth;
   //images = images.sort(function (a, b) { return a.width - b.width });

diff --git a/tests/format/flow-repo/call_caching1/__snapshots__/jsfmt.spec.js.snap b/tests/format/flow-repo/call_caching1/__snapshots__/jsfmt.spec.js.snap
@@ -23,7 +23,7 @@ for (let [taskStatus, tasksMap] of tasksPerStatusMap) {
 const Immutable = require("immutable");
 
 const tasksPerStatusMap = new Map(
-  [].map((taskStatus) => [taskStatus, new Map()])
+  [].map((taskStatus) => [taskStatus, new Map()]),
 );
 for (let [taskStatus, tasksMap] of tasksPerStatusMap) {
   tasksPerStatusMap.set(taskStatus, Immutable.Map(tasksMap));
@@ -64,7 +64,7 @@ declare class Bar<K> { update<K_>(updater: (value: this) => Bar<K_>): Bar<K_> }
 
 declare function foo<U>(
   initialValue: U,
-  callbackfn: (previousValue: U) => U
+  callbackfn: (previousValue: U) => U,
 ): U;
 
 declare var items: Bar<string>;

diff --git a/tests/format/flow-repo/call_caching1/lib/__snapshots__/jsfmt.spec.js.snap b/tests/format/flow-repo/call_caching1/lib/__snapshots__/jsfmt.spec.js.snap
@@ -37,7 +37,7 @@ declare class Array<T> {
   @@iterator(): Iterator<T>;
   map<U>(
     callbackfn: (value: T, index: number, array: Array<T>) => U,
-    thisArg?: any
+    thisArg?: any,
   ): Array<U>;
 }
 

diff --git a/tests/format/flow-repo/destructuring/__snapshots__/jsfmt.spec.js.snap b/tests/format/flow-repo/destructuring/__snapshots__/jsfmt.spec.js.snap
@@ -186,7 +186,7 @@ obj_prop_var({ p: {} }); // ok
 obj_prop_var({ p: { q: null } }); // ok, provides add'l lower bound
 
 function obj_rest(
-  { p: { q, ...o } = { q: 0, r: 0 } } = { p: { q: 0, r: "" } }
+  { p: { q, ...o } = { q: 0, r: 0 } } = { p: { q: 0, r: "" } },
 ) {
   // errors:
   // * number  ~> void, from default on _.p
@@ -204,7 +204,7 @@ function obj_prop_annot(
     p = true, // error: boolean ~> string
   }: { p: string } = {
     p: 0, // error: number ~> string
-  }
+  },
 ) {
   (p: void); // error: string ~> void
 }