Delete `(` eslint (prettier/prettier) - eslint

Question

I have a conflict of rules. When I include parentheses around multiline JSX, the prettier reports a error Delete `(` eslint (prettier/prettier).
But if I remove the parentheses I have another eslint error Missing parentheses around multilines JSX eslint(react/jsx-wrap-multilines)
<ScreenLayout
content={( <--------- problems here
<Component
// any props...
// any props...
>
// any components...
// any components...
// any components...
</Component>
problems here ------> )}
/>
I understand that the correct thing is to use parentheses. How to fix this Delete `(` eslint (prettier/prettier) validation?
My devDependencies
"#babel/cli": "^7.12.10",
"#babel/core": "^7.12.3",
"#babel/plugin-proposal-class-properties": "^7.12.1",
"#babel/plugin-transform-runtime": "^7.12.1",
"#babel/preset-env": "^7.12.11",
"#babel/preset-react": "^7.12.10",
"#babel/preset-typescript": "^7.12.1",
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#types/jest": "^26.0.19",
"#types/react-dom": "^16.9.10",
"#types/react-redux": "^7.1.12",
"#types/react-responsive": "^8.0.2",
"#types/react-router-dom": "^5.1.7",
"#types/styled-components": "^5.1.7",
"#typescript-eslint/eslint-plugin": "^4.14.2",
"#typescript-eslint/parser": "^4.14.2",
"babel-jest": "^26.6.3",
"babel-loader": "^8.1.0",
"browserslist": "^4.16.0",
"connect-history-api-fallback": "^1.6.0",
"cross-env": "^7.0.3",
"css-loader": "^4.3.0",
"eslint": "^7.19.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-config-prettier": "^7.2.0",
"eslint-import-resolver-typescript": "^2.3.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"jest": "^26.6.0",
"jest-css-modules-transform": "^4.1.0",
"jest-sonar-reporter": "^2.0.0",
"jest-trx-results-processor": "^2.2.0",
"node-sass": "^5.0.0",
"prettier": "^2.2.1",
"sass-loader": "^8.0.2"

Answer 1

Faced the same issue. Particularly, I dislike an additional parenthesis inside my props. So disabling the rule should solve your problem.
Add this to your .eslintrc.json inside rules:
"react/jsx-wrap-multilines": "off"

Answer 2

The conflict exists because linters not only have code quality rules but also stylistic ones, so when you use Prettier you will have conflicting rules.
To fix this I disabled this rules in the linter, so it would take care about the code quality while Prettier takes care of the looks.
You can install a package like eslint-config-prettier.
npm install --save-dev eslint-config-prettier
And then extending the linter like this:
{ "extends": [
"some-other-config-you-use",
"prettier" ] }
Check out the repo: https://github.com/prettier/eslint-config-prettier

Answer 3

Upon the checking in this documentation I see that only prop rules that conflicting with prettier rules while other rules was actually the same like one and another. So the other way around except off the rule was by ignoring prop validation in the jsx-wrap-multilines rules on .eslintrc file in the rules option like this
'react/jsx-wrap-multilines': ['error', { prop: false }]

Answer 4

Add this to your .eslintrc.json inside rules:
"react/jsx-wrap-multilines": [
"error",
{ "arrow": true, "return": true, "declaration": true }
]