Fix formatting for tagged template decorators (#11717)

* Fix formatting for tagged template decorators

* Add changelog

changelog_unreleased/typescript/11717.md

@@ -0,0 +1,22 @@
+#### Fix formatting for tagged template decorators (#11717 by @sosukesuzuki)
+
+<!-- prettier-ignore -->
+```tsx
+// Input
+class Test {
+  @foo`bar`
+  test: string = "test"
+}
+
+// Prettier stable
+class Test {
+  @(foo`bar`)
+  test: string = "test"
+}
+
+// Prettier main
+class Test {
+  @foo`bar`
+  test: string = "test"
+}
+```

src/language-js/needs-parens.js

@@ -140,6 +140,10 @@ function needsParens(path, options) {
               break;
             case "Identifier":
               return false;
+            case "TaggedTemplateExpression":
+              // babel-parser cannot parse
+              //   @foo`bar`
+              return options.parser !== "typescript";
             default:
               return true;
           }

tests/format/misc/errors/babel-ts/__snapshots__/jsfmt.spec.js.snap

@@ -41,6 +41,16 @@ exports[`multiline-declaration-type.ts [babel-ts] format 1`] = `
   3 |"
 `;
 
+exports[`parenthesized-decorators-tagged-template.ts [babel-ts] format 1`] = `
+"Unexpected token (2:7)
+  1 | class Test {
+> 2 |   @foo\`bar\`
+    |       ^
+  3 |   text: string = \\"text\\"
+  4 | }
+  5 |"
+`;
+
 exports[`type-annotation-expr-statement.ts [babel-ts] format 1`] = `
 "Did not expect a type annotation here. (1:3)
 > 1 | (a: T);

tests/format/misc/errors/babel-ts/parenthesized-decorators-tagged-template.ts

@@ -0,0 +1,4 @@
+class Test {
+  @foo`bar`
+  text: string = "text"
+}

tests/format/misc/typescript-babel-only/__snapshots__/jsfmt.spec.js.snap

@@ -60,6 +60,26 @@ class Bar {
 ================================================================================
 `;
 
+exports[`parenthesized-decorators-tagged-template.ts format 1`] = `
+====================================options=====================================
+parsers: ["babel-ts"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+class Test {
+  @(foo\`bar\`)
+  text: string = "text"
+}
+
+=====================================output=====================================
+class Test {
+  @(foo\`bar\`)
+  text: string = "text";
+}
+
+================================================================================
+`;
+
 exports[`prettier-ignore-nested-unions.ts format 1`] = `
 ====================================options=====================================
 parsers: ["babel-ts"]

tests/format/misc/typescript-babel-only/parenthesized-decorators-tagged-template.ts

@@ -0,0 +1,4 @@
+class Test {
+  @(foo`bar`)
+  text: string = "text"
+}

tests/format/misc/typescript-only/__snapshots__/jsfmt.spec.js.snap

@@ -93,6 +93,26 @@ class Bar {
 ================================================================================
 `;
 
+exports[`parenthesized-decorators-tagged-template.ts format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+class Test {
+  @foo\`bar\`
+  text: string = "text"
+}
+
+=====================================output=====================================
+class Test {
+  @foo\`bar\`
+  text: string = "text";
+}
+
+================================================================================
+`;
+
 exports[`prettier-ignore-parenthesized-type.ts format 1`] = `
 ====================================options=====================================
 parsers: ["typescript"]

tests/format/misc/typescript-only/parenthesized-decorators-tagged-template.ts

@@ -0,0 +1,4 @@
+class Test {
+  @foo`bar`
+  text: string = "text"
+}