Question

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

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

更漂亮的处理之前的初始代码：

// 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
  }
}

我的漂亮配置（它是package.json的一部分）

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

我正在通过沙哑的lint：fix链将其作为git钩子运行

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

Answer 1

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

来自 Prettier install 文档：

<块引用>

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

看看 source，它似乎会关闭 ESLint 抱怨的 indent 和 operator-linebreak 规则。

我看到你注意到了：

<块引用>

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

这两条规则真的有用吗？它们似乎属于“格式规则”而不是“代码质量规则”，所以我想知道允许 Prettier 做它的目的有什么危害。 (Reference)

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

替代解决方案

如果您真的想反其道而行之并修改 Prettier 的行为，也许您可以忽略这些文件或使用内联注释：https://prettier.io/docs/en/ignore.html

如何配置Prettier来格式化样式化组件的条件渲染

1 个答案:

替代解决方案