Change default value of trailingComma to "all"

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" }`.

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
 

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: "es5" },
+      { since: "3.0.0", value: "all" },
     ],
     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,

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>
@@ -1452,11 +1454,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
@@ -1723,10 +1725,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
@@ -2351,11 +2354,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>
@@ -2444,10 +2447,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>
@@ -2736,11 +2740,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
@@ -2795,10 +2799,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
@@ -3564,11 +3569,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>
@@ -3731,10 +3736,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>
@@ -10512,11 +10518,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 -->
@@ -12039,10 +12045,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 -->
@@ -13609,11 +13616,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>
@@ -13624,10 +13631,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>

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 });

tests/format/flow-repo/annot/__snapshots__/jsfmt.spec.js.snap

@@ -116,7 +116,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.
@@ -324,7 +324,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);

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 });

tests/format/flow-repo/binding/__snapshots__/jsfmt.spec.js.snap

@@ -684,7 +684,7 @@ function for_of_scope_var(xs: string[]) {
 function default_param_1() {
   // function binding in scope in default expr
   function f(
-    x: () => string = f // error: number ~> string
+    x: () => string = f, // error: number ~> string
   ): number {
     return 0;
   }

tests/format/flow-repo/bom/__snapshots__/jsfmt.spec.js.snap

@@ -197,7 +197,7 @@ o.disconnect(); // correct
 // constructor
 function callback(
   arr: Array<MutationRecord>,
-  observer: MutationObserver
+  observer: MutationObserver,
 ): void {
   return;
 }

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));
@@ -66,7 +66,7 @@ declare class Bar<K> {
 
 declare function foo<U>(
   initialValue: U,
-  callbackfn: (previousValue: U) => U
+  callbackfn: (previousValue: U) => U,
 ): U;
 
 declare var items: Bar<string>;

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>;
 }
 

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
@@ -206,7 +206,7 @@ function obj_prop_annot(
     p: string,
   } = {
     p: 0, // error: number ~> string
-  }
+  },
 ) {
   (p: void); // error: string ~> void
 }