运算符换行规则上的 Eslint 和更漂亮的冲突

Posted 2023-02-22

【中文标题】运算符换行规则上的 Eslint 和更漂亮的冲突

【英文标题】：Eslint and prettier conflict on operator-linebreak rule

【发布时间】：2020-09-09 03:31:46

【问题描述】：

我有一些 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】：

据美人doc：

由于历史原因，Prettier 有一些选择。但我们不想要更多。 Prettier 不是一个试图以任何你希望的方式打印你的代码的厨房水槽代码格式化程序。这是自以为是的。

引用Why Prettier?页： 到目前为止，采用 Prettier 的最大原因是停止所有正在进行的关于样式的争论。

Prettier 提供了几种格式 options，其中一些是：

标签宽度 标签 分号 行情 报价道具 JSX 行情 尾随逗号

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

【讨论】：

此配置将禁用 eslint 规则，但我需要保留 eslint 规则并禁用更漂亮的规则

我已经更新了答案以显示它无法完成。

有一个未解决的问题：github.com/prettier/prettier/issues/3806