6

我有规则冲突。当我在多行 JSX 周围包含括号时,更漂亮的会报告错误Delete `(` eslint (prettier/prettier)

在此处输入图像描述

但是如果我删除括号,我会遇到另一个 eslint 错误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 ------> )}
/>

我知道正确的做法是使用括号。如何修复此Delete `(` eslint (prettier/prettier)验证?

我的 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"
4

2 回答 2

3

面临同样的问题。特别是,我不喜欢道具中的额外括号。因此禁用该规则应该可以解决您的问题。

将此添加到您的.eslintrc.json内部rules

      "react/jsx-wrap-multilines": "off"
于 2021-05-11T16:59:29.910 回答
1

冲突的存在是因为 linter 不仅有代码质量规则,还有风格规则,所以当你使用 Prettier 时,你会有冲突的规则。

为了解决这个问题,我在 linter 中禁用了这个规则,所以它会关注代码质量,而 Prettier 会关注外观。

你可以安装像eslint-config-prettier这样的包。

npm install --save-dev eslint-config-prettier

然后像这样扩展 linter:

{“扩展”:[“其他配置你使用”,“更漂亮”]}

查看回购:https ://github.com/prettier/eslint-config-prettier

于 2021-02-24T14:54:05.410 回答