no-unexpected-multiline rule clashes with Prettier

I am using TypeScript, Prettier (1.17.0) and styled-components in a CRA app. When I define the prop types of my styled components inline, I end up with constructs like these:

const Component = styled.div<{
  prop1?: Type;
  prop2?: Type;
}>`
  /* Some styles here... */
`;

The above is the formatting chosen by Prettier. However, CRA’s ESLint config doesn’t seem to agree:

Line 1:  Unexpected newline between template tag and template literal  no-unexpected-multiline [no-unexpected-multiline]

This means that when I use the pattern above, it is impossible for me to use ESLint and create-react-app together without getting linter errors. It would be cool if the no-unexpected-multiline rule could be either disabled or configured to not trigger in the cases that Prettier creates.

[Hermanya]

this is crazy annoying, one kind of a workaround I found so far is replacing this

export const Checkbox = styled.input<
  React.HTMLAttributes<HTMLInputElement> & SpaceProps
>``

with this

type Props = React.HTMLAttributes<HTMLInputElement> & SpaceProps;
export const Checkbox = styled.input<Props>``

[stefatkins]

I added this to my package.json (i’m using typescript)

"eslintConfig": {
    "extends": "react-app",
    "overrides": [
      {
        "files": [
          "**/*.ts?(x)"
        ],
        "rules": {
          "no-unexpected-multiline": 0
        }
      }
    ]
  },