Eslint and prettier conflict on operator-linebreak rule

Question

I have some eslint and prettier config. When I hit ctrl + s to save my code my eslint is trying to format the code like this :

        (errors.password
            && (errors.password.type === 'minLength'
            || errors.password.type === 'maxLength') && (
              <Styled.Error className="invalidForm">
                Password must be more than 6 and less then 32 digits
              </Styled.Error>
          ))
            || (errors.password && (
              <Styled.Error className="invalidForm">
                Password is required
              </Styled.Error>
            ))

and instantly after that prettier also format code to that:

        (errors.password &&
            (errors.password.type === 'minLength' ||
              errors.password.type === 'maxLength') && (
              <Styled.Error className="invalidForm">
                Password must be more than 6 and less then 32 digits
              </Styled.Error>
            )) ||
            (errors.password && (
              <Styled.Error className="invalidForm">
                Password is required
              </Styled.Error>
            ))

I don't want to chage eslint rule, and I don't want to disable prettier format. How could I change the prettier rule for placing logic operators?

Answer 1

According to prettier doc:

Prettier has a few options because of history. But we don’t want more of them. Prettier is not a kitchen-sink code formatter that attempts to print your code in any way you wish. It is opinionated.

Quoting the Why Prettier? page: By far the biggest reason for adopting Prettier is to stop all the on-going debates over styles.

Prettier ships with a handful of format options, some of them are:

• Tab Width
• Tabs
• Semicolons
• Quotes
• Quote Props
• JSX Quotes
• Trailing Commas

But these options doesn't include what you are looking for.