Prevent adding unnecessary quotes when a computed key exists (#6119)

CHANGELOG.unreleased.md

@@ -126,6 +126,31 @@ const v = /** @type{string} */ value;
 const v = /** @type{string} */ (value);
 ```
 
+### JavaScript: Prevent adding quotes when using `--quote-props=consistent` and one of the keys were a computed "complex" expression ([#6119] by [@duailibe])
+
+Previously, Prettier added unnecessary quotes to keys of an object, or properties and methods of classes, if there was at least one computed key with a "complex" expression (e.g. a member expression).
+
+<!-- prettier-ignore -->
+```js
+// Input
+const obj = {
+  foo: "",
+  [foo.bar]: "",
+}
+
+// Output (Prettier stable)
+const obj = {
+  "foo": "",
+  [foo.bar]: "",
+}
+
+// Output (Prettier master)
+const obj = {
+  foo: "",
+  [foo.bar]: "",
+}
+```
+
 ### Markdown: correctly determine count of backticks in inline code ([#6110] by [@belochub])
 
 By the CommonMark spec, it is required to 'choose a string of `n` backtick characters as delimiters, where the code does not contain any strings of exactly `n` backtick characters.'
@@ -155,8 +180,10 @@ This changes the method of finding the required count of backticks from using 2
 [#6106]: https://github.com/prettier/prettier/pull/6106
 [#6116]: https://github.com/prettier/prettier/pull/6116
 [#6110]: https://github.com/prettier/prettier/pull/6110
+[#6119]: https://github.com/prettier/prettier/pull/6119
 [@jridgewell]: https://github.com/jridgewell
 [@jwbay]: https://github.com/jwbay
 [@brainkim]: https://github.com/brainkim
 [@sosukesuzuki]: https://github.com/sosukesuzuki
 [@belochub]: https://github.com/belochub
+[@duailibe]: https://github.com/duailibe

src/language-js/printer-estree.js

@@ -3610,6 +3610,7 @@ function printPropertyKey(path, options, print) {
       parent.members
     ).some(
       prop =>
+        !prop.computed &&
         prop.key &&
         prop.key.type !== "Identifier" &&
         !isStringPropSafeToCoerceToIdentifier(prop, options)
@@ -3632,6 +3633,7 @@ function printPropertyKey(path, options, print) {
   }
 
   if (
+    !node.computed &&
     isStringPropSafeToCoerceToIdentifier(node, options) &&
     (options.quoteProps === "as-needed" ||
       (options.quoteProps === "consistent" && !needsQuoteProps.get(parent)))
@@ -6399,7 +6401,6 @@ function isStringPropSafeToCoerceToIdentifier(node, options) {
   return (
     isStringLiteral(node.key) &&
     isIdentifierName(node.key.value) &&
-    !node.computed &&
     options.parser !== "json" &&
     !(options.parser === "typescript" && node.type === "ClassProperty")
   );

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

@@ -377,3 +377,128 @@ const d = {
 
 ================================================================================
 `;
+
+exports[`with-member-expressions.js 1`] = `
+====================================options=====================================
+parsers: ["flow", "babel"]
+printWidth: 80
+quoteProps: "as-needed"
+                                                                                | printWidth
+=====================================input======================================
+const obj = {
+  foo: "",
+  [foo.bar]: ""
+};
+
+class Foo {
+  foo() {}
+  [foo.bar]() {}
+}
+
+=====================================output=====================================
+const obj = {
+  foo: "",
+  [foo.bar]: ""
+};
+
+class Foo {
+  foo() {}
+  [foo.bar]() {}
+}
+
+================================================================================
+`;
+
+exports[`with-member-expressions.js 2`] = `
+====================================options=====================================
+parsers: ["flow", "babel"]
+printWidth: 80
+quoteProps: "preserve"
+                                                                                | printWidth
+=====================================input======================================
+const obj = {
+  foo: "",
+  [foo.bar]: ""
+};
+
+class Foo {
+  foo() {}
+  [foo.bar]() {}
+}
+
+=====================================output=====================================
+const obj = {
+  foo: "",
+  [foo.bar]: ""
+};
+
+class Foo {
+  foo() {}
+  [foo.bar]() {}
+}
+
+================================================================================
+`;
+
+exports[`with-member-expressions.js 3`] = `
+====================================options=====================================
+parsers: ["flow", "babel"]
+printWidth: 80
+quoteProps: "consistent"
+                                                                                | printWidth
+=====================================input======================================
+const obj = {
+  foo: "",
+  [foo.bar]: ""
+};
+
+class Foo {
+  foo() {}
+  [foo.bar]() {}
+}
+
+=====================================output=====================================
+const obj = {
+  foo: "",
+  [foo.bar]: ""
+};
+
+class Foo {
+  foo() {}
+  [foo.bar]() {}
+}
+
+================================================================================
+`;
+
+exports[`with-member-expressions.js 4`] = `
+====================================options=====================================
+parsers: ["flow", "babel"]
+printWidth: 80
+quoteProps: "consistent"
+singleQuote: true
+                                                                                | printWidth
+=====================================input======================================
+const obj = {
+  foo: "",
+  [foo.bar]: ""
+};
+
+class Foo {
+  foo() {}
+  [foo.bar]() {}
+}
+
+=====================================output=====================================
+const obj = {
+  foo: '',
+  [foo.bar]: ''
+};
+
+class Foo {
+  foo() {}
+  [foo.bar]() {}
+}
+
+================================================================================
+`;

tests/quote_props/with-member-expressions.js

@@ -0,0 +1,9 @@
+const obj = {
+  foo: "",
+  [foo.bar]: ""
+};
+
+class Foo {
+  foo() {}
+  [foo.bar]() {}
+}