删除 `(` eslint (更漂亮/更漂亮)

Question

我的规则有冲突。当我在多行 JSX 周围包含括号时，prettier 会报告错误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)验证？

我的开发依赖项

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

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

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

      "react/jsx-wrap-multilines": "off"

Answer 2

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

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

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

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

然后像这样扩展 linter：

{“扩展”：[“您使用的其他配置”，“更漂亮”]}

查看存储库：https://github.com/prettier/eslint-config-prettier