diff --git a/changelog_unreleased/typescript/11717.md b/changelog_unreleased/typescript/11717.md new file mode 100644 index 000000000..0a35341c1 --- /dev/null +++ b/changelog_unreleased/typescript/11717.md @@ -0,0 +1,22 @@ +#### Fix formatting for tagged template decorators (#11717 by @sosukesuzuki) + + +```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" +} +``` diff --git a/src/language-js/needs-parens.js b/src/language-js/needs-parens.js index b8daece9c..220f40f24 100644 --- a/src/language-js/needs-parens.js +++ b/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; } diff --git a/tests/format/misc/errors/babel-ts/__snapshots__/jsfmt.spec.js.snap b/tests/format/misc/errors/babel-ts/__snapshots__/jsfmt.spec.js.snap index ac122bb47..efda7f5ab 100644 --- a/tests/format/misc/errors/babel-ts/__snapshots__/jsfmt.spec.js.snap +++ b/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); diff --git a/tests/format/misc/errors/babel-ts/parenthesized-decorators-tagged-template.ts b/tests/format/misc/errors/babel-ts/parenthesized-decorators-tagged-template.ts new file mode 100644 index 000000000..ff4bca6b4 --- /dev/null +++ b/tests/format/misc/errors/babel-ts/parenthesized-decorators-tagged-template.ts @@ -0,0 +1,4 @@ +class Test { + @foo`bar` + text: string = "text" +} diff --git a/tests/format/misc/typescript-babel-only/__snapshots__/jsfmt.spec.js.snap b/tests/format/misc/typescript-babel-only/__snapshots__/jsfmt.spec.js.snap index faf67d5fe..4f08e7695 100644 --- a/tests/format/misc/typescript-babel-only/__snapshots__/jsfmt.spec.js.snap +++ b/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"] diff --git a/tests/format/misc/typescript-babel-only/parenthesized-decorators-tagged-template.ts b/tests/format/misc/typescript-babel-only/parenthesized-decorators-tagged-template.ts new file mode 100644 index 000000000..e12dd2e2c --- /dev/null +++ b/tests/format/misc/typescript-babel-only/parenthesized-decorators-tagged-template.ts @@ -0,0 +1,4 @@ +class Test { + @(foo`bar`) + text: string = "text" +} diff --git a/tests/format/misc/typescript-only/__snapshots__/jsfmt.spec.js.snap b/tests/format/misc/typescript-only/__snapshots__/jsfmt.spec.js.snap index d2b929a84..244e6d831 100644 --- a/tests/format/misc/typescript-only/__snapshots__/jsfmt.spec.js.snap +++ b/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"] diff --git a/tests/format/misc/typescript-only/parenthesized-decorators-tagged-template.ts b/tests/format/misc/typescript-only/parenthesized-decorators-tagged-template.ts new file mode 100644 index 000000000..ff4bca6b4 --- /dev/null +++ b/tests/format/misc/typescript-only/parenthesized-decorators-tagged-template.ts @@ -0,0 +1,4 @@ +class Test { + @foo`bar` + text: string = "text" +}