9

I have a conflict of rules. When I include parentheses around multiline JSX, the prettier reports a error Delete `(` eslint (prettier/prettier).

enter image description here

But if I remove the parentheses I have another eslint error Missing parentheses around multilines JSX eslint(react/jsx-wrap-multilines)

enter image description here

<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"
Eduardo Dallmann
  • 423
  • 5
  • 14

4 Answers4

5

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"
Pedro Henrique Bufulin
  • 729
  • 6
  • 14
1

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

Danf
  • 1,409
  • 2
  • 21
  • 39
1

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 }]
Adrian Panatra
  • 95
  • 1
  • 5
0

Add this to your .eslintrc.json inside rules:

"react/jsx-wrap-multilines": [
  "error",
  { "arrow": true, "return": true, "declaration": true }
]
Tyler2P
  • 2,324
  • 26
  • 22
  • 31
xwk
  • 1