如何配置 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
  }

我将它作为 git 钩子通过 husky 在带有 lint:fix 的链中运行

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

Answer 1

您是否考虑过尝试eslint-config-prettier ？

来自 Prettier 安装文档：

如果您使用 ESLint，请安装 eslint-config-prettier 以使 ESLint 和 Prettier 相互配合。 它会关闭所有不必要或可能与 Prettier 冲突的 ESLint 规则。

查看源代码，它似乎会关闭 ESLint 抱怨的indent和operator-linebreak换行规则。

---

我看到你指出：

我不想更改 Eslint 规则，因为它们在“真实”用例中非常有用。

这两条规则真的有用吗？ 它们似乎属于“格式化规则”而不是“代码质量规则”的范畴，所以我想知道让 Prettier 做它的目的有什么害处。 （参考）

在我看来，您的问题来自使用 ESLint 和 Prettier，但让它们的职责重叠（ eslint-config-prettier可以解决）。

替代解决方案

如果你真的想 go 另一个方向并修改 Prettier 的行为，也许你可以忽略文件或使用内联注释： https://prettier.io/docs/en/ignore.ZFC35FDC70D5FC69D23EZA883