删除 `(` eslint (prettier/prettier)

Posted 2023-02-22

【中文标题】删除 `(` eslint (prettier/prettier)

【英文标题】：Delete `(` eslint (prettier/prettier)

【发布时间】：2021-05-06 00:09:52

【问题描述】：

我有规则冲突。当我在多行 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"

【问题讨论】：

你能解决这个问题吗？我也面临同样的问题

很遗憾还没有解决

有什么更新吗？有同样的问题

【参考方案1】：

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

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

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

【参考方案2】：

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

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

您可以安装 eslint-config-prettier 之类的软件包。

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

然后像这样扩展 linter：

“扩展”：[ “你使用的一些其他配置”， “更漂亮”]

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