Как настроить Prettier для форматирования условного рендеринга Styled Components

Question

Я использую компоненты Prettier, Eslint и Styled - декларация стиля backtick. Пока это работает, но Преттир форматирует условный рендеринг компонентов Styled так, как это не позволяет 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};
      `
      };
    `;
  }}
`;

После этого Эслинт начинает жаловаться:

  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, потому что они действительно полезны в «реальных» случаях использования. Так есть ли способ правильно решить эту проблему? Спасибо за любую помощь!

Обновление:

Мой .eslintr c. 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 (входит в пакет. json)

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

Я запускаю его как git крючок через лайку в цепочке с пухом: fix

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