Repository: prettier/prettier (JavaScript)
Date: 2019-06-07 14:11:09+00:00
Task type: Bug Fix

Issue:
Prettier 1.18 breaks support for TS users < 3.3
**Prettier 1.18.0**
[Playground link](https://prettier.io/playground/#N4Igxg9gdgLgprEAuEAzArlMMCW0AEqEE+AFAIYBOA5gM5L4DaAOlPux+7TJTlNQBpWnTt178hbEVx59Bw6fjFzJipbIkLpyzVO0b5ekTsNqTqxea3GD19gF0AlPmABfEAJAQADrmi1kUCpKCAB3AAUqBACUcgA3CBwAEw8QACNKcjAAazgYAGVvLLlkHnQ4TwALGABbABsAdUqceFoisDh86JacOJaAT2RwWgDPPlo4ShhwzOoa8mRUcjqJzwArWgAPACFMnLz88hq4ABk+OEXl1ZANzfy5OrgARXQIeEuVipAiygnKIZg-W8cFoYF4vlS3nEMAayRglWQAA4AAyeKEQCYNTLeIZQkGTOIXTwAR1e8BmPhiIHItAAtFA4HAkkzUpQ4KScGyZuQ5gskEtPp4JjUcKVKOUhQ9nmSLvyrl8YOQ0rCkvDkAAmTw8cg4OpyADCEBq8yGIIArKl0BMACpKmICiauVxAA)
```sh
--parser typescript
--trailing-comma es5
```

**Input:**
```tsx
function foo (args: [
        string,
        string,
        string,
        string,
        string,
        string,
        string,
        string,
        string,
        string,
        string
      ]) {}
```

**Output:**
```tsx
function foo(
  args: [
    string,
    string,
    string,
    string,
    string,
    string,
    string,
    string,
    string,
    string,
    string,
  ]
) {}

```

**Expected behavior:**

According to the PR at https://github.com/prettier/prettier/pull/6172, this should only be applied when the trailing comma is `all` but it also gets applied when it's set to `es5`.

Secondly because we were on TS 3.2 (we can't upgrade get because we're on an older angular version) this broke our build as TS 3.2 can't parse the output. I think the TS version could be read by prettier and then used to determine whether to apply this transformation.


Issue discussion:
@mattlewis92 

Oh thanks for the report! Indeed there was a bug there. I'll fix it and release 1.18.2 in a bit.

> I think the TS version could be read by prettier and then used to determine whether to apply this transformation.

This is a good idea.
Awesome, thanks!

Solution patch:
diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js
index 09d3e26abbd1..b56a59f96e73 100644
--- a/src/language-js/printer-estree.js
+++ b/src/language-js/printer-estree.js
@@ -2487,7 +2487,7 @@ function printPathNoParens(path, options, print, args) {
               printArrayItems(path, options, typesField, print)
             ])
           ),
-          ifBreak(shouldPrintComma(options) ? "," : ""),
+          ifBreak(shouldPrintComma(options, "all") ? "," : ""),
           comments.printDanglingComments(path, options, /* sameIndent */ true),
           softline,
           "]"


Test patch:
diff --git a/tests/typescript_tuple/__snapshots__/jsfmt.spec.js.snap b/tests/typescript_tuple/__snapshots__/jsfmt.spec.js.snap
index ea436406d13e..4a7cbef55649 100644
--- a/tests/typescript_tuple/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/typescript_tuple/__snapshots__/jsfmt.spec.js.snap
@@ -44,6 +44,47 @@ exports[`trailing-comma.ts 2`] = `
 ====================================options=====================================
 parsers: ["typescript"]
 printWidth: 80
+trailingComma: "es5"
+                                                                                | printWidth
+=====================================input======================================
+export interface ShopQueryResult {
+  chic: boolean;
+  location: number[];
+  menus: Menu[];
+  openingDays: number[];
+  closingDays: [
+    {
+      from: string,
+      to: string,
+    }, // <== this one
+  ];
+  shop: string;
+  distance: number;
+}
+
+=====================================output=====================================
+export interface ShopQueryResult {
+  chic: boolean;
+  location: number[];
+  menus: Menu[];
+  openingDays: number[];
+  closingDays: [
+    {
+      from: string;
+      to: string;
+    } // <== this one
+  ];
+  shop: string;
+  distance: number;
+}
+
+================================================================================
+`;
+
+exports[`trailing-comma.ts 3`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
 trailingComma: "all"
                                                                                 | printWidth
 =====================================input======================================
@@ -114,6 +155,36 @@ exports[`tuple.ts 2`] = `
 ====================================options=====================================
 parsers: ["typescript"]
 printWidth: 80
+trailingComma: "es5"
+                                                                                | printWidth
+=====================================input======================================
+
+export type SCMRawResource = [
+	number /*handle*/,
+	string /*resourceUri*/,
+	modes.Command /*command*/,
+	string[] /*icons: light, dark*/,
+	boolean /*strike through*/,
+	boolean /*faded*/
+];
+
+=====================================output=====================================
+export type SCMRawResource = [
+  number /*handle*/,
+  string /*resourceUri*/,
+  modes.Command /*command*/,
+  string[] /*icons: light, dark*/,
+  boolean /*strike through*/,
+  boolean /*faded*/
+];
+
+================================================================================
+`;
+
+exports[`tuple.ts 3`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
 trailingComma: "all"
                                                                                 | printWidth
 =====================================input======================================
diff --git a/tests/typescript_tuple/jsfmt.spec.js b/tests/typescript_tuple/jsfmt.spec.js
index a17d1d35589d..9ae5dd616d9c 100644
--- a/tests/typescript_tuple/jsfmt.spec.js
+++ b/tests/typescript_tuple/jsfmt.spec.js
@@ -1,2 +1,3 @@
 run_spec(__dirname, ["typescript"]);
+run_spec(__dirname, ["typescript"], { trailingComma: "es5" });
 run_spec(__dirname, ["typescript"], { trailingComma: "all" });