Eslint 和 prettier 的 operator-linebreak 规则冲突

IT技术 reactjs eslint conflict rules prettier
2021-05-18 12:58:43

我有一些 eslint 和漂亮的配置。当我按下 ctrl + s 来保存我的代码时,我的 eslint 试图像这样格式化代码:

        (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>
            ))

紧接着,漂亮的也将代码格式化为:

        (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>
            ))

我不想改变 eslint 规则,也不想禁用更漂亮的格式。如何更改放置逻辑运算符的更漂亮的规则?

1个回答

根据更漂亮的文档

由于历史原因,Prettier 有几个选择。但我们不想要更多。 Prettier 不是厨房水槽代码格式化程序,它试图以您希望的任何方式打印您的代码固执己见

引用为什么更漂亮page:到目前为止,采用 Prettier 的最大原因是停止所有关于风格的争论。

Prettier 附带了一些格式选项,其中一些是:

  • 标签宽度
  • 标签
  • 分号
  • 引号
  • 报价props
  • JSX 行情
  • 尾随逗号

但是这些选项不包括您要查找的内容。