Fix unstable and ugly formatting for comments in destructuring patterns (#15708)

changelog_unreleased/typescript/15708.md

@@ -0,0 +1,31 @@
+#### Fix unstable and ugly formatting for comments in destructuring patterns (#15708 by @sosukesuzuki)
+
+<!-- prettier-ignore -->
+```tsx
+// Input
+const {
+  foo,
+  // bar
+  // baz
+}: Foo = expr;
+
+// Prettier stable
+const {
+  foo1,
+} // bar
+// baz
+: Foo = expr;
+
+// Prettier stable second output
+const {
+  foo1, // bar
+} // baz
+: Foo = expr;
+
+// Prettier main
+const {
+  foo1,
+  // bar
+  // baz
+}: Foo = expr;
+```

src/language-js/comments/handle-comments.js

@@ -62,6 +62,7 @@ function handleOwnLineComment(context) {
     handleLabeledStatementComments,
     handleBreakAndContinueStatementComments,
     handleNestedConditionalExpressionComments,
+    handleCommentsInDestructuringPattern,
   ].some((fn) => fn(context));
 }
 
@@ -976,6 +977,44 @@ function handleLastUnionElementInExpression({
   return false;
 }
 
+/**
+ * const [
+ *   foo,
+ *   // bar
+ *   // baz
+ * ]: Foo = foo();
+ *
+ * const {
+ *   foo,
+ *   // bar
+ *   // baz
+ * }: Foo = foo();
+ *
+ */
+function handleCommentsInDestructuringPattern({
+  comment,
+  enclosingNode,
+  precedingNode,
+  followingNode,
+}) {
+  if (
+    (enclosingNode?.type === "ObjectPattern" ||
+      enclosingNode?.type === "ArrayPattern") &&
+    followingNode?.type === "TSTypeAnnotation"
+  ) {
+    if (precedingNode) {
+      addTrailingComment(precedingNode, comment);
+    } else {
+      // const {
+      //   // bar
+      //   // baz
+      // }: Foo = expr;
+      addDanglingComment(enclosingNode, comment);
+    }
+    return true;
+  }
+}
+
 /**
  * @param {Node} node
  * @returns {boolean}

tests/format/typescript/comments/15707.ts

@@ -0,0 +1,55 @@
+const {
+  foo,
+  // bar
+  // baz
+}: Foo = expr;
+
+const {
+  foo1,
+  // bar
+  foo2,
+  // baz
+}: Foo = expr;
+
+const [
+  foo,
+  // bar
+  // baz
+]: Foo = expr;
+
+const [
+  foo1,
+  // bar
+  foo2,
+  // baz
+]: Foo = expr;
+
+function method({
+  foo,
+  // bar = "bar",
+  // bazz = "bazz",
+}: Foo) {}
+
+function method({
+  foo1,
+  // bar = "bar",
+  foo2
+  // bazz = "bazz",
+}: Foo) {}
+
+function method([
+  foo,
+  // bar = "bar",
+  foo2
+  // bazz = "bazz",
+]: Foo) {}
+
+const {
+  // bar
+  // baz
+}: Foo = expr;
+
+const [
+  // bar
+  // baz
+]: Foo = expr;

tests/format/typescript/comments/__snapshots__/jsfmt.spec.js.snap

@@ -1,5 +1,127 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`15707.ts format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+const {
+  foo,
+  // bar
+  // baz
+}: Foo = expr;
+
+const {
+  foo1,
+  // bar
+  foo2,
+  // baz
+}: Foo = expr;
+
+const [
+  foo,
+  // bar
+  // baz
+]: Foo = expr;
+
+const [
+  foo1,
+  // bar
+  foo2,
+  // baz
+]: Foo = expr;
+
+function method({
+  foo,
+  // bar = "bar",
+  // bazz = "bazz",
+}: Foo) {}
+
+function method({
+  foo1,
+  // bar = "bar",
+  foo2
+  // bazz = "bazz",
+}: Foo) {}
+
+function method([
+  foo,
+  // bar = "bar",
+  foo2
+  // bazz = "bazz",
+]: Foo) {}
+
+const {
+  // bar
+  // baz
+}: Foo = expr;
+
+const [
+  // bar
+  // baz
+]: Foo = expr;
+
+=====================================output=====================================
+const {
+  foo,
+  // bar
+  // baz
+}: Foo = expr;
+
+const {
+  foo1,
+  // bar
+  foo2,
+  // baz
+}: Foo = expr;
+
+const [
+  foo,
+  // bar
+  // baz
+]: Foo = expr;
+
+const [
+  foo1,
+  // bar
+  foo2,
+  // baz
+]: Foo = expr;
+
+function method({
+  foo,
+  // bar = "bar",
+  // bazz = "bazz",
+}: Foo) {}
+
+function method({
+  foo1,
+  // bar = "bar",
+  foo2,
+  // bazz = "bazz",
+}: Foo) {}
+
+function method([
+  foo,
+  // bar = "bar",
+  foo2,
+  // bazz = "bazz",
+]: Foo) {}
+
+const {
+  // bar
+  // baz
+}: Foo = expr;
+
+const [
+  // bar
+  // baz
+]: Foo = expr;
+
+================================================================================
+`;
+
 exports[`abstract_class.ts format 1`] = `
 ====================================options=====================================
 parsers: ["typescript"]