title: Prettier is not formatting my Styled Components code
body: <p>I'm using Prettier, Eslint and Styled components in my project. The eslint rules are working so far. I don't know why, but Prettier is not formatting the styled components code.</p>
  <p>Let me show you the example code that I am trying to fix:</p>
  <p>This is the original code:</p>
  <pre><code>import { createGlobalStyle } from 'styled-components';
  
  export const GlobalStyles = createGlobalStyle`
  * {
  box-sizing: border-box;
  }
  body {
  font-size: 1.15em;
  margin: 0;
  }
  `;
  </code></pre>
  <p>This is the code that I am expecting to get after formatting through Prettier and Eslint (but I am not) :</p>
  <pre><code>import { createGlobalStyle } from 'styled-components';
  
  export const GlobalStyles = createGlobalStyle`
      * {
          box-sizing: border-box;
      }
      
      body {
          font-size: 1.15em;
          margin: 0;
      }
  `;
  </code></pre>
  <p>My eslintrc.json:</p>
  <pre><code>{
      &quot;env&quot;: {
          &quot;browser&quot;: true,
          &quot;es2021&quot;: true,
          &quot;jest&quot;: true
      },
      &quot;extends&quot;: [
          &quot;next/core-web-vitals&quot;,
          &quot;eslint:recommended&quot;,
          &quot;plugin:jsx-a11y/recommended&quot;,
          &quot;plugin:@typescript-eslint/recommended&quot;
      ],
      &quot;parser&quot;: &quot;@typescript-eslint/parser&quot;,
      &quot;parserOptions&quot;: {
          &quot;ecmaFeatures&quot;: {
              &quot;jsx&quot;: true
          },
          &quot;ecmaVersion&quot;: &quot;latest&quot;,
          &quot;project&quot;: &quot;tsconfig.json&quot;,
          &quot;sourceType&quot;: &quot;module&quot;
      },
      &quot;plugins&quot;: [&quot;@typescript-eslint/eslint-plugin&quot;, &quot;react&quot;, &quot;prettier&quot;],
      &quot;rules&quot;: {
          &quot;react/jsx-uses-react&quot;: &quot;off&quot;,
          &quot;react/react-in-jsx-scope&quot;: &quot;off&quot;,
          &quot;no-shadow&quot;: &quot;off&quot;
      },
      &quot;ignorePatterns&quot;: [&quot;dist&quot;, &quot;node_modules&quot;]
  }
  </code></pre>
  <p>My .prettierrc:</p>
  <pre><code>{
      &quot;arrowParens&quot;: &quot;always&quot;,
      &quot;printWidth&quot;: 120,
      &quot;semi&quot;: true,
      &quot;singleQuote&quot;: true,
      &quot;tabWidth&quot;: 4,
      &quot;trailingComma&quot;: &quot;es5&quot;,
      &quot;useTabs&quot;: false
  }
  </code></pre>
  <p>Any modification or recommendation will be more than welcome. So is there any way to solve this problem correctly? Thanks for any help!</p>