Delete `(` eslint (prettier/prettier)

user_4926048 0
Viewed 3797

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"
prettier-eslint prettier eslint
3 Answers

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"
user_98593350

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

user_67405010

Add this to your .eslintrc.json inside rules:

"react/jsx-wrap-multilines": [
  "error",
  { "arrow": true, "return": true, "declaration": true }
]
user_173534700
Related