操作符换行规则上的Eslint和更漂亮的冲突

Question

我有一些随便的配置。当我按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规则，也不想禁用更漂亮的格式。如何更改用于放置逻辑运算符的更漂亮的规则？

Answer 1

根据漂亮的doc：

eslint-config-prettier是一种禁用与Prettier冲突的规则的配置。

这样，只有冲突的规则才被禁止保留，而漂亮的规则将处理这些规则的格式。

使用纱安装：

yarn add --dev eslint-config-prettier

要使用npm安装它：

npm i -D eslint-config-prettier

然后在.eslintrc.json中将以下内容添加到最后一个'extends'数组：

{
  "extends": ["prettier"]
}