title: How to configure Prettier to format Styled Components conditional rendering
body: <p>I'm using Prettier, Eslint and Styled components - backtick style declaration. 
  It works so far but Prettier formats the conditional rendering of the Styled components in the way that Eslint doesn't allow and after the formatting Eslint starts to complain and the build fails.</p>
  
  <p>Let me show you the problem via code.</p>
  
  <p>Initial code before Prettier handling:</p>
  
  <pre><code>// styled components styles apply
  const TextInputStyled = styled(TextInputThemed)`
    ${(props: StyledProps) =&gt; {
      const {
        theme: { theme10x },
        disabled,
        success,
        error,
      } = props;
      return `
        ${success &amp;&amp; `
          border-color: ${theme10x.palette.common.success};
        `};
  
        ${error &amp;&amp; `
          background-color: ${theme10x.palette.common.error};
        `};
  
        ${disabled &amp;&amp; `
          background-color: ${theme10x.palette.background.disabled};
        `};
      `;
    }}
  </code></pre>
  
  <p>After Prettier Handling:</p>
  
  <pre><code>// styled components styles apply
  const TextInputStyled = styled(TextInputThemed)`
    ${(props: StyledProps) =&gt; {
      const {
        theme: { theme10x },
        disabled,
        success,
        error,
      } = props;
      return `
        ${
          success &amp;&amp;
          `
          border-color: ${theme10x.palette.common.success};
        `
        };
  
        ${
          error &amp;&amp;
          `
          background-color: ${theme10x.palette.common.error};
        `
        };
  
        ${
          disabled &amp;&amp;
          `
          background-color: ${theme10x.palette.background.disabled};
        `
        };
      `;
    }}
  `;
  </code></pre>
  
  <p>After that Eslint starts to complain:</p>
  
  <pre><code>  133:1   error    Expected indentation of 2 spaces but found 8        indent
    133:19  error    '&amp;&amp;' 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    '&amp;&amp;' 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    '&amp;&amp;' should be placed at the beginning of the line  operator-linebreak
    151:1   error    Expected indentation of 0 spaces but found 6        indent
  </code></pre>
  
  <p>I wouldn't like to change Eslint rules because they are really useful in the 'real' use cases.
  So is there exists any way to solve this problem correctly? 
  Thanks for any help!</p>
  
  <p>Update:</p>
  
  <p>My .eslintrc.json</p>
  
  <pre><code>{
    "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
    }
  }
  </code></pre>
  
  <p>My Prettier config (it's a part of the package.json)</p>
  
  <pre><code>  "prettier": {
      "trailingComma": "es5",
      "semi": true,
      "singleQuote": true
    }
  </code></pre>
  
  <p>I'm running it as a git hook via husky in a chain with lint:fix</p>
  
  <pre><code>  "husky": {
      "hooks": {
        "pre-commit": "npm run lint:fix &amp;&amp; pretty-quick --staged"
      }
    },
  </code></pre>