diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md index 538a5fec42a5..df2af2751f2a 100644 --- a/CHANGELOG.unreleased.md +++ b/CHANGELOG.unreleased.md @@ -43,3 +43,37 @@ const link = http://example.com; ``` --> + +#### TypeScript: Add trailing comma in tsx, only for arrow function ([#6190] by [@sosukesuzuki]) + +Prettier inserts a trailing comma to single type parameter for arrow functions in tsx, since v 1.18. But, this feature inserts a trailing comma to type parameter for besides arrow functions too (e.g, function , interface). This change fix it. + + +```tsx +// Input +interface Interface1 { + one: "one"; +} +function function1() { + return "one"; +} + +// Output (Prettier stable) +interface Interface1 { + one: "one"; +} +function function1() { + return "one"; +} + +// Output (Prettier master) +interface Interface1 { + one: "one"; +} +function function1() { + return "one"; +} +``` + +[#6190]: https://github.com/prettier/prettier/pull/6190 +[@sosukesuzuki]: https://github.com/sosukesuzuki diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js index 0805ba32fb96..09d3e26abbd1 100644 --- a/src/language-js/printer-estree.js +++ b/src/language-js/printer-estree.js @@ -3003,12 +3003,14 @@ function printPathNoParens(path, options, print, args) { // Keep comma if the file extension is .tsx and // has one type parameter that isn't extend with any types. // Because, otherwise formatted result will be invalid as tsx. + const grandParent = path.getNode(2); if ( parent.params && parent.params.length === 1 && options.filepath && - options.filepath.match(/\.tsx/) && - !n.constraint + /\.tsx$/i.test(options.filepath) && + !n.constraint && + grandParent.type === "ArrowFunctionExpression" ) { parts.push(","); } diff --git a/tests/typescript_tsx/__snapshots__/jsfmt.spec.js.snap b/tests/typescript_tsx/__snapshots__/jsfmt.spec.js.snap index 09cd5b84a85c..8a43306c5dea 100644 --- a/tests/typescript_tsx/__snapshots__/jsfmt.spec.js.snap +++ b/tests/typescript_tsx/__snapshots__/jsfmt.spec.js.snap @@ -113,11 +113,47 @@ const functionName1 = (arg) => false; const functionName2 = (arg) => false; const functionName3 = (arg) => false; +function functionName4() { + return false; +} + +functionName5(); + +interface Interface1 { + one: "one"; +} + +interface Interface2 { + two: Two; +} + +type Type1 = "type1"; + +type Type2 = Two; + =====================================output===================================== const functionName1 = (arg) => false; const functionName2 = (arg) => false; const functionName3 = (arg) => false; +function functionName4() { + return false; +} + +functionName5(); + +interface Interface1 { + one: "one"; +} + +interface Interface2 { + two: Two; +} + +type Type1 = "type1"; + +type Type2 = Two; + ================================================================================ `; diff --git a/tests/typescript_tsx/type-parameters.tsx b/tests/typescript_tsx/type-parameters.tsx index 3b80dc537f5c..0e1ed719e25c 100644 --- a/tests/typescript_tsx/type-parameters.tsx +++ b/tests/typescript_tsx/type-parameters.tsx @@ -1,3 +1,21 @@ const functionName1 = (arg) => false; const functionName2 = (arg) => false; const functionName3 = (arg) => false; + +function functionName4() { + return false; +} + +functionName5(); + +interface Interface1 { + one: "one"; +} + +interface Interface2 { + two: Two; +} + +type Type1 = "type1"; + +type Type2 = Two;