reactjs - 如何配置 Prettier 来格式化 Styled Components 条件渲染

Question

我正在使用 Prettier、Eslint 和 Styled 组件 - 反引号样式声明。
到目前为止它可以工作，但是 Prettier 以 Eslint 不允许的方式格式化 Styled 组件的条件渲染，并且在格式化之后 Eslint 开始提示并且构建失败。

让我通过代码向您展示问题。

Prettier 处理前的初始代码:

// styled components styles apply
const TextInputStyled = styled(TextInputThemed)`
  ${(props: StyledProps) => {
    const {
      theme: { theme10x },
      disabled,
      success,
      error,
    } = props;
    return `
      ${success && `
        border-color: ${theme10x.palette.common.success};
      `};

      ${error && `
        background-color: ${theme10x.palette.common.error};
      `};

      ${disabled && `
        background-color: ${theme10x.palette.background.disabled};
      `};
    `;
  }}

更漂亮的处理后:

// styled components styles apply
const TextInputStyled = styled(TextInputThemed)`
  ${(props: StyledProps) => {
    const {
      theme: { theme10x },
      disabled,
      success,
      error,
    } = props;
    return `
      ${
        success &&
        `
        border-color: ${theme10x.palette.common.success};
      `
      };

      ${
        error &&
        `
        background-color: ${theme10x.palette.common.error};
      `
      };

      ${
        disabled &&
        `
        background-color: ${theme10x.palette.background.disabled};
      `
      };
    `;
  }}
`;

在那之后，Eslint 开始提示:

  133:1   error    Expected indentation of 2 spaces but found 8        indent
  133:19  error    '&&' should be placed at the beginning of the line  operator-linebreak
  137:1   error    Expected indentation of 0 spaces but found 6        indent
  140:1   error    Expected indentation of 2 spaces but found 8        indent
  140:17  error    '&&' should be placed at the beginning of the line  operator-linebreak
  144:1   error    Expected indentation of 0 spaces but found 6        indent
  147:1   error    Expected indentation of 2 spaces but found 8        indent
  147:20  error    '&&' should be placed at the beginning of the line  operator-linebreak
  151:1   error    Expected indentation of 0 spaces but found 6        indent

我不想更改 Eslint 规则，因为它们在“真实”用例中非常有用。
那么有没有办法正确解决这个问题呢？
谢谢你的帮助!

更新:

我的 .eslintrc.json

{
  "extends": [
    "airbnb",
    "eslint:recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "rules": {
    "@typescript-eslint/no-explicit-any": 0, 
    "react/static-property-placement": 0,

    "quotes": [2, "single"],
    "import/no-unresolved": 0,
    "comma-dangle": 0,
    "linebreak-style": 0,
    "react/state-in-constructor": 0,
    "no-underscore-dangle": 0,
    "react/jsx-props-no-spreading": 0,
    "semi": 1,
    "comma-dangle:": 0,
    "import/prefer-default-export": 0,
    "import/extensions": 0,
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [".jsx", ".tsx"]
      }
    ],
    "@typescript-eslint/explicit-function-return-type": 0
  }
}

我的 Prettier 配置(它是 package.json 的一部分)

  "prettier": {
    "trailingComma": "es5",
    "semi": true,
    "singleQuote": true
  }

我正在使用 lint:fix 通过 husky 在链中将它作为 git hook 运行

  "husky": {
    "hooks": {
      "pre-commit": "npm run lint:fix && pretty-quick --staged"
    }
  },

Answer 1

您是否考虑过尝试eslint-config-prettier ?
来自更漂亮的 install文档:

If you use ESLint, install eslint-config-prettier to make ESLint and Prettier play nice with each other. It turns off all ESLint rules that are unnecessary or might conflict with Prettier.

看着 source ，它似乎会关闭 indent和 operator-linebreak ESLint 提示的规则。

我看到你注意到了:

I wouldn't like to change Eslint rules because they are really useful in the 'real' use cases.

这两条规则真的有用吗？它们似乎属于“格式规则”而不是“代码质量规则”，所以我想知道允许 Prettier 做它的目的有什么危害。 ( Reference )
在我看来，您的问题来自使用 ESLint 和 Prettier，但让它们的职责重叠( eslint-config-prettier 可以解决)。
替代解决方案
如果您 真的想要走另一个方向并修改 Prettier 的行为，也许您可​​以忽略文件或使用内联注释: https://prettier.io/docs/en/ignore.html