ESLint和Prettier在operator-linebreak规则上存在冲突

Question

我有一些eslint和prettier的配置。当我按下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规则，也不想禁用prettier格式。我怎样才能更改prettier规则以放置逻辑运算符？

- Alex Lance

---

你找到了把那些逻辑运算符放在表达式前面的解决方案了吗？ - EugenSunic

问题还没有解决。 - Alex Lance

Answer 1

根据prettier的文档：链接：

Prettier有一些选项是历史原因。但我们不想要更多。
Prettier不是厨房水槽代码格式化工具，试图以任何你希望的方式打印你的代码。它是具有偏见的。

引用为什么使用Prettier页面所说：

采用Prettier的最大原因是停止关于样式的所有持续辩论。

Prettier附带一些格式化选项链接，其中一些是：

• 制表符宽度
• 标签页
• 分号
• 引号
• 引用道具
• JSX引号
• 尾随逗号

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

- isAif

---

此配置将禁用eslint规则，但我需要保留eslint规则并禁用prettier规则。 - Alex Lance

我已经更新了答案，以表明它无法完成。 - isAif

有一个未解决的问题：https://github.com/prettier/prettier/issues/3806 - Dario Seidl

我曾经遇到过prettier和eslint在operator-linebreak上发生冲突的问题。将prettier添加到我的.eslintrc文件的extends数组中，现在eslint意识到prettier的格式，并且不会抛出错误了。 - Rishabh

当将prettier添加到.eslintrc文件的extends数组中时，它可以工作。感谢@Rishabh。 - Aamir Ali Hussain

Answer 2

为了避免ESLint和Prettier之间的冲突，您可以使用eslint-config-prettier包。该包禁用了所有与Prettier格式化冲突或不必要的ESLint规则。以下是设置步骤：

确保您的项目中已安装ESLint和Prettier。如果没有安装，您可以使用npm或yarn进行安装。

1. 安装包 ``` npm install eslint-config-prettier --save-dev ```

2. 将prettier添加到eslintrc配置中 ``` extends: ['prettier', // 添加这一行], ```

3. eslint-config-prettier附带了一个小的CLI工具，可以帮助您检查配置中是否包含任何与Prettier冲突或不必要的规则。运行以下命令： ``` npx eslint-config-prettier path/to/main.js ```

- Seb