删除 `(` eslint (prettier/prettier)

问题描述

我有规则冲突。当我在多行 JSX 周围加上括号时，prettier 会报告错误 --abort。

但是如果我删除括号，我会遇到另一个 eslint 错误 Delete `(` eslint (prettier/prettier)

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)

解决方法

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

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

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

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

然后像这样扩展 linter：

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

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

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

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

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

eslint eslint prettier prettier-eslint