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

Posted 2023-02-21

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

【英文标题】：React native - eslintrc - prettierrc: how to prevent removing of parentheses around one element in JSX

【发布时间】：2020-04-29 03:25:21

【问题描述】：

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

return (
    <Component />
);

到

return <Component />;

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

【参考方案1】：

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

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

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

但是，prettier 中没有选项可以配置您提到的更改的行为。尽管如此，还是有一些解决方法：

1) 禁用导致更改的行：

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

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

3) 仅使用 eslint，因为默认情况下 eslint 不会将这种写入视为错误。 （或者根本不处理这种情况）。

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

希望它对您有所帮助。

【参考方案2】：

首先，在您的项目主文件夹中创建一个名为 .prettierrc.js 的文件，然后写下这些推荐

module.exports = 
arrowParens: false,
;

或

module.exports = 
  arrowParens: "avoid",
;