How to configure Prettier to format Styled Components conditional rendering How to configure Prettier to format Styled Components conditional rendering reactjs reactjs

How to configure Prettier to format Styled Components conditional rendering


Have you considered trying eslint-config-prettier?

From the Prettier install docs:

If you use ESLint, install eslint-config-prettier to make ESLint and Prettier play nice with each other. It turns off all ESLint rules that are unnecessary or might conflict with Prettier.

Looking at the source, it appears it would turn off the indent and operator-linebreak rules ESLint is complaining about.


I see you noted:

I wouldn't like to change Eslint rules because they are really useful in the 'real' use cases.

Are these two rules truly useful? They seem to fall into the category of "formatting rules" rather than "code-quality rules", and so I wonder what the harm is in allowing Prettier to do what it's built for. (Reference)

It seems to me your problem comes from using ESLint and Prettier, but leaving them with an overlap in their responsibilities (which eslint-config-prettier could address).

Alternate Solution

If you really want to go the other direction and modify Prettier's behavior, perhaps you can ignore the files or use inline comments: https://prettier.io/docs/en/ignore.html