Prettier formatting of ternary expressions breaks functionality

Taken from https://prettier.io/docs/en/rationale.html:

Correctness The first requirement of Prettier is to output valid code that has the exact same behavior as before formatting. Please report any code where Prettier fails to follow these correctness rules — that’s a bug which needs to be fixed!

This is unfortunately the case here, see code snippets below.

Prettier 2.7.1 The Prettier playground was unable to handle the code, so I had to enter it manually.

# Options (if any):
{
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": true,
  "semi": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "bracketSameLine": true,
  "arrowParens": "always"
}

Input:

baseURL:
  process.env.server === 'dev'
  ? `https://web.dev/.${AWS_BASEURL}`
  : process.env.server === 'dev1'
  ? 'https://dev1.some.url/'
  : process.env.server === 'dev2'
  ? 'https://dev2.some.url/'
  : process.env.server === 'dev3'
  ? 'https://dev3.some.url/'
  : process.env.server === 'prod'
  ? 'https://www.some.url/'
  : process.env.server === 'blackpearl'
  ? `https://web.some.env/.${AWS_BASEURL}`
  : process.env.server === 'gary'
  ? `https://web.some.env/.${AWS_BASEURL}`
  : process.env.server === 'karen'
  ? `https://web.some.env/.${AWS_BASEURL}`
  : process.env.server === 'plankton'
  ? `https://web.some.env/.${AWS_BASEURL}`
  : process.env.server === 'sandy'
  ? `https://web.some.env/.${AWS_BASEURL}`
  : `https://web.dev/.${AWS_BASEURL}`,

Output:

baseURL:
  process.env.server === 'dev'
    ? `https://web.dev/.${AWS_BASEURL}`
    : process.env.server === 'dev1'
    ? 'https://dev1.some.url/'
    : process.env.server === 'dev2'
    ? 'https://dev2.some.url/'
    : process.env.server === 'dev3'
    ? 'https://dev3.some.url/'
    : process.env.server === 'prod'
    ? 'https://www.some.url/'
    : process.env.server === 'blackpearl'
    ? `https://web.some.env/.${AWS_BASEURL}`
    : process.env.server === 'gary'
    ? `https://web.some.env/.${AWS_BASEURL}`
    : process.env.server === 'karen'
    ? `https://web.some.env/.${AWS_BASEURL}`
    : process.env.server === 'plankton'
    ? `https://web.some.env/.${AWS_BASEURL}`
    : (process.env.server = 'sandy' ? `https://web.some.env/.${AWS_BASEURL}` : `https://web.dev/.${AWS_BASEURL}`),

Expected behavior: Prettier should not add the parenthesis around the sandy option and the default option. This leads to the sandy environment being treated as the default option, which breaks the intended functionality.

It is unclear where that parenthesis is even coming from, I couldn’t find a prettier rule that would do that, so it seems like a bug to me.
If not, please specify which rule causes this erroneous behaviour so I can turn it off.
If there is no rule for it yet, please add a rule so this can be prevented at least.

[azad-derakhshani-GS]

There’s a comma at the end of your input that causes a syntax error Is the code listing on your input example the whole code that you’re having problems with?

It’s part of the config file - which is much larger - of our Playwright project (you can find a shorter example here). The comma actually belongs there, there’d be a syntax error without it. If I had pasted the entire file’s code in here (or in a playground link), it would’ve become much more difficult for anyone to find the affected part of the code there, so I only included that part of the code.

process.env.server = ‘sandy’

Didn’t you mean to use === here?

Yes indeed, it should’ve been === like in all the other lines there, my bad! 🤦‍♂️

Prettier adds parens around such assignment expressions to make them more distinguishable from comparisons and prevent accidental usage of = instead of ===.

But imho that is a very bad and unintuitive approach. If anything, prettier should’ve corrected it to === instead of adding parens. And adding parens does not prevent accidental usage of = instead of === as is evident by the fact that the = was still there after reformatting (I later fixed that myself btw, without the ‘help’ of prettier).

Anyway, I’ve had to completely change the implementation to prevent Prettier from breaking our code, which honestly doesn’t inspire confidence in it. From what I understand, Prettier should only improve code formatting, not change the functionality in the code, so I would suggest changing that behaviour. But since I solved my problem in a different way, we can close this ticket now.

[thorn0]

Adding these parens doesn’t change the meaning of the code. Please learn JS before writing stuff like this.