删除 `(` eslint (prettier/prettier)

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)验证？

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

---

你能解决这个问题吗？我也遇到了同样的问题。 - user3216381

很遗憾，目前还未解决。 - Eduardo Dallmann

有任何更新吗？我还是遇到同样的问题。 - Danf

Answer 1

我遇到过相同的问题。特别是，我不喜欢在我的 props 中再加一个括号。因此，禁用该规则应该可以解决你的问题。

将以下内容添加到你的.eslintrc.json 文件中的 rules 中：

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

- Pedro Henrique Bufulin

Answer 2

在查看此文档时，我发现只有与prettier规则冲突的prop规则，而其他规则实际上是相同的。因此，除了off规则之外，在.eslintrc文件的rules选项中忽略jsx-wrap-multilines规则中的prop验证即可。具体做法如下：

'react/jsx-wrap-multilines': ['error', { prop: false }]

- Adrian Panatra

Answer 3

冲突的原因在于linter不仅有代码质量规则，还有样式规则，所以当你使用Prettier时，就会产生冲突规则。

为了解决这个问题，我禁用了linter中的这些规则，这样它就可以处理代码质量，而Prettier则负责外观方面的处理。

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

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

然后像这样扩展代码检查工具：

{ "extends": [ "你使用的其他配置", "prettier" ] }

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

- Danf

Answer 4

将以下代码添加到您的 .eslintrc.json 文件中的 rules 部分：

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

- xwk