React native - eslintrc - prettierrc：如何防止移除 JSX 中一个元素周围的括号

Question

我刚刚创建了新的 react-native 应用程序，eslint 改变了这一点：

return (
    <Component />
);

到

return <Component />;

我试图更改 .eslintrc 和 .prettierrc 文件，但没有任何效果。

Answer 1

在这个回复中，我认为您正在使用 eslint 和 prettier，以及.eslintrc 中的prettier扩展和prettier插件，以及规则的存在"prettier/prettier": "error"。

\n\n

这里带来的错误来自 prettier，因为错误是这样发现的：

\n\n

Replace `(\xe2\x8f\x8e\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7<Component\xc2\xb7/>\xe2\x8f\x8e\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7)` with `<Component\xc2\xb7/>\n

\n\n

但是，prettier 中没有选项来配置您提到的更改的行为。尽管如此，仍然存在一些解决方法：

\n\n

1)禁用导致更改的行：

\n\n

Replace `(\xe2\x8f\x8e\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7<Component\xc2\xb7/>\xe2\x8f\x8e\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7)` with `<Component\xc2\xb7/>\n

\n\n

2）使用选项requirePragma，您需要在每个文件顶部插入您想要更漂亮的评论/**@format */。但是，此技术需要更改所有文件。也许不是最好的解决方案。

\n\n

3）仅使用eslint，因为eslint默认不认为这种写法是错误的。（或者根本不处理这种情况）。

\n\n

一个要问的问题；为什么要保留带括号的格式？更改所需的行数更少，并且代码仍然可读。

\n\n

希望它能在某种程度上帮助您。

\n