Inconsistent behavior with ternary expressions and optional chaining

[anjitcubit]

Prettier 3.3.3 Playground link

--parser typescript
--print-width 100
--no-semi
--jsx-single-quote
--trailing-comma es5

Input:

function HelloWorld() {

const formatFunction =()=>{
   return order === 'asc'
          ? a?.trials[action.trailNumber - 1]?.result ??
            0 - b?.trials[action.trailNumber - 1]?.result ??
            0
          : b?.trials[action.trailNumber - 1]?.result ??
            0 - a?.trials[action.trailNumber - 1]?.result ??
            0
}
  
     // TODO: Don't use random in render
  let num = Math.floor (Math.random() * 1E+7).toString().replace(/\.\d+/ig, "")

  return <div>Hello word</div>
}

Output:

function HelloWorld() {
  const formatFunction = () => {
    return order === "asc"
      ? (a?.trials[action.trailNumber - 1]?.result ??
          0 - b?.trials[action.trailNumber - 1]?.result ??
          0)
      : (b?.trials[action.trailNumber - 1]?.result ??
          0 - a?.trials[action.trailNumber - 1]?.result ??
          0)
  }

  // TODO: Don't use random in render
  let num = Math.floor(Math.random() * 1e7)
    .toString()
    .replace(/\.\d+/gi, "")

  return <div>Hello word</div>
}

Expected output: or this is what has been on my device

  order === 'asc'
            ? a?.trials[action.trailNumber - 1]?.result ??
              0 - b?.trials[action.trailNumber - 1]?.result ??
              0
            : b?.trials[action.trailNumber - 1]?.result ??
              0 - a?.trials[action.trailNumber - 1]?.result ??
              0

Second example Input

startDate={search?.start_date ? new Date(search?.start_date) ?? null : null}

Output on playground

startDate={search?.start_date ? new (Date(search?.start_date) ?? null) : null}

This is what has been on my device

startDate={search?.start_date ? new Date(search?.start_date ?? null) : null}

Why? the question is why in my VS code it's not adding braces on the format but on playground and other devices. I'm not against adding small braces here, but I'm looking for consistency, we share the same project with vs/prettier setting and getting different output on save.

[fisker]

Second example

Our playground shows different output, maybe you have conflicting ESLint rules?

Prettier 3.3.3 Playground link

--parser babel

Input:

<a startDate={search?.start_date ? new Date(search?.start_date) ?? null : null}/>

Output:

<a
  startDate={search?.start_date ? (new Date(search?.start_date) ?? null) : null}
/>;

[anjitcubit]

@fisker yes that's my question too, even if its an eslint why is it different from device to device, and prettier is supposed to override the eslint rule isn't it

extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:prettier/recommended', ],

[dcyriller]

prettier is supposed to override the eslint rule isn't it

No, not really. Have you checked out https://prettier.io/docs/en/integrating-with-linters? It should help you resolve your issue.