Create-react-app: no-unexpected-multiline rule clashes with Prettier

[denisw]

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>``

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[Garmega]

just ran into this issue. had to downgrade below 3.0.0 in order for the linter warning to go away.

[jonmcgill]

May not be for everyone, but I solved this using craco to extend the CRA eslint configuration:

// craco.config.js
module.exports = {
  eslint: {
    configure: {
      rules: {
        'no-unexpected-multiline': 0
      }
    }
  }
}

[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
        }
      }
    ]
  },