react-native - react native - eslintrc - prettierrc : how to prevent removing of parentheses around one element in JSX

Question

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

return (
    <Component />
);

到

return <Component />;

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

Answer 1

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

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

Replace `(⏎······<Component·/>⏎····)` with `<Component·/>

但是，没有更好的选项来配置您提到的更改的行为。尽管如此，还是有一些解决方法:

1) 禁用导致更改的行:

// eslint-disable-next-line prettier/prettier
return (
  <Component />
);

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

3) 只使用 eslint，因为默认情况下 eslint 不认为这种写法是错误的。 (或根本不处理这种情况)。

要问的问题；为什么要保留带括号的格式？更改需要更少的行，并且代码保持可读性。

希望它在某种程度上帮助了你。