JavaScript: Fix Bad format for multi-line optional chaining with comment (#6506)

CHANGELOG.unreleased.md

@@ -598,6 +598,34 @@ export {
 export { fooooooooooooooooooooooooooooooooooooooooooooooooo } from "fooooooooooooooooooooooooooooo";
 ```
 
+#### JavaScript: Fix bad formatting for multi-line optional chaining with comment ([#6506] by [@sosukesuzuki])
+
+<!-- prettier-ignore -->
+```js
+// Input
+return a
+  .b()
+  .c()
+  // Comment
+  ?.d()
+
+// Prettier (stable)
+return a
+  .b()
+  .c()
+  ?.// Comment
+  d();
+
+// Prettier (master)
+return (
+  a
+    .b()
+    .c()
+    // Comment
+    ?.d()
+);
+```
+
 [#5910]: https://github.com/prettier/prettier/pull/5910
 [#6186]: https://github.com/prettier/prettier/pull/6186
 [#6206]: https://github.com/prettier/prettier/pull/6206
@@ -619,6 +647,7 @@ export { fooooooooooooooooooooooooooooooooooooooooooooooooo } from "fooooooooooo
 [#6438]: https://github.com/prettier/prettier/pull/6411
 [#6441]: https://github.com/prettier/prettier/pull/6441
 [#6446]: https://github.com/prettier/prettier/pull/6446
+[#6506]: https://github.com/prettier/prettier/pull/6506
 [@duailibe]: https://github.com/duailibe
 [@gavinjoyce]: https://github.com/gavinjoyce
 [@sosukesuzuki]: https://github.com/sosukesuzuki

src/language-js/comments.js

@@ -363,7 +363,8 @@ function handleTryStatementComments(
 function handleMemberExpressionComments(enclosingNode, followingNode, comment) {
   if (
     enclosingNode &&
-    enclosingNode.type === "MemberExpression" &&
+    (enclosingNode.type === "MemberExpression" ||
+      enclosingNode.type === "OptionalMemberExpression") &&
     followingNode &&
     followingNode.type === "Identifier"
   ) {

tests/optional_chaining/__snapshots__/jsfmt.spec.js.snap

@@ -71,3 +71,109 @@ async function HelloWorld() {
 
 ================================================================================
 `;
+
+exports[`comments.js 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+function foo() {
+  return a
+    .b()
+    .c()
+    // Comment
+    ?.d()
+}
+
+fooBar
+  .doSomething("Hello World")
+  .doAnotherThing("Foo", { foo: bar })
+
+  // App configuration.
+  .doOneMoreThing(config)
+
+  ?.run(() => console.log("Bar"));
+
+bigDeal
+
+  .doSomething("Hello World")
+
+  // Hello world
+  ?.doAnotherThing("Foo", { foo: bar })
+
+  // App configuration.
+  .doOneMoreThing(config)
+
+  ?.run(() => console.log("Bar"));
+
+foo.bar.baz
+
+  ?.doSomething("Hello World")
+
+  // Hello world
+  .foo.bar.doAnotherThing("Foo", { foo: bar })
+
+  .doOneMoreThing(config)
+  ?.bar.run(() => console.log("Bar"));
+
+(somethingGood ? thisIsIt : maybeNot)
+
+// Hello world
+.doSomething("Hello World")
+
+  ?.doAnotherThing("Foo", { foo: bar }) // Run this
+  .run(() => console.log("Bar")); // Do this
+
+=====================================output=====================================
+function foo() {
+  return (
+    a
+      .b()
+      .c()
+      // Comment
+      ?.d()
+  );
+}
+
+fooBar
+  .doSomething("Hello World")
+  .doAnotherThing("Foo", { foo: bar })
+
+  // App configuration.
+  .doOneMoreThing(config)
+
+  ?.run(() => console.log("Bar"));
+
+bigDeal
+
+  .doSomething("Hello World")
+
+  // Hello world
+  ?.doAnotherThing("Foo", { foo: bar })
+
+  // App configuration.
+  .doOneMoreThing(config)
+
+  ?.run(() => console.log("Bar"));
+
+foo.bar.baz
+
+  ?.doSomething("Hello World")
+
+  // Hello world
+  .foo.bar.doAnotherThing("Foo", { foo: bar })
+
+  .doOneMoreThing(config)
+  ?.bar.run(() => console.log("Bar"));
+
+(somethingGood ? thisIsIt : maybeNot)
+
+  // Hello world
+  .doSomething("Hello World")
+
+  ?.doAnotherThing("Foo", { foo: bar }) // Run this
+  .run(() => console.log("Bar")); // Do this
+
+================================================================================
+`;

tests/optional_chaining/comments.js

@@ -0,0 +1,46 @@
+function foo() {
+  return a
+    .b()
+    .c()
+    // Comment
+    ?.d()
+}
+
+fooBar
+  .doSomething("Hello World")
+  .doAnotherThing("Foo", { foo: bar })
+
+  // App configuration.
+  .doOneMoreThing(config)
+
+  ?.run(() => console.log("Bar"));
+
+bigDeal
+
+  .doSomething("Hello World")
+
+  // Hello world
+  ?.doAnotherThing("Foo", { foo: bar })
+
+  // App configuration.
+  .doOneMoreThing(config)
+
+  ?.run(() => console.log("Bar"));
+
+foo.bar.baz
+
+  ?.doSomething("Hello World")
+
+  // Hello world
+  .foo.bar.doAnotherThing("Foo", { foo: bar })
+
+  .doOneMoreThing(config)
+  ?.bar.run(() => console.log("Bar"));
+
+(somethingGood ? thisIsIt : maybeNot)
+
+// Hello world
+.doSomething("Hello World")
+
+  ?.doAnotherThing("Foo", { foo: bar }) // Run this
+  .run(() => console.log("Bar")); // Do this