箭头函数隐式返回用括号自动包装

Posted 2023-02-22

【中文标题】箭头函数隐式返回用括号自动包装

【英文标题】：Arrow function implicit return wrapped automatically with parenthesis

【发布时间】：2019-05-11 12:01:25

【问题描述】：

我正在使用带有 Prettier 的 Visual Studio Code，功能如下：

(token: string) => this.token = token

变成：

(token: string) => (this.token = token)

我认为它会降低可读性... 有没有办法防止这种情况发生？

【问题讨论】：

为什么你觉得添加括号会降低代码的可读性？

@d_kennetz 不必要的噪音

@d_kennetz 因为它使块代码看起来更像一个表达式，如果你读得太快，它会将“=>”变成赋值“=”。

【参考方案1】：

在less opinionated code formatter 出现之前，这是一个解决方案（如果它已经存在，请指出给我）。

打开以下文件：

Windows

%USERPROFILE%\.vscode\extensions\esbenp.prettier-vscode-5.8.0\node_modules\prettier\index.js

ma​​cOS

、

Linux

~/.vscode/extensions/esbenp.prettier-vscode-5.8.0/node_modules/prettier/index.js

（其中%USERPROFILE% 通常是C:\Users\YourUsernameHere\）

如果您来自未来，您可能会看到 esbenp.prettier-vscode-X.X.X 文件夹的不同版本名称。相应地修改路径。

使用 Ctrl + F 搜索 case "AssignmentExpression":（大约出现四到五次），直到找到 this little snippet of code。将图中的return true 更改为return false。我在41587 行找到了该声明，但这可能会在未来版本的 Prettier 中发生变化，因此请使用 Ctrl + F 搜索。

保存文件，重新启动 VSCode，它就像魔术一样工作。

我发现 macOS may get upset with you 上的 VSCode 用于摆弄内部结构。弹出窗口中应该有一些设置图标，可以让您选择忽略错误。选择忽略错误，然后重新启动 VSCode，它应该可以正常工作了。

【参考方案2】：

您可以添加配置文件进行自定义配置，可以是 json、js、yaml 等，请参考此链接这可能对您有所帮助

https://prettier.io/docs/en/configuration.html

对于箭头函数，如果您使用 json，可能您必须在 .prettierrc 文件中使用 "arrowParens": "aviod"架构以避免自动添加括号。

【讨论】：

这条规则只影响参数

【参考方案3】：

这是由于 no-return-assign 规则造成的。见https://eslint.org/docs/rules/no-return-assign。

不管你怎么想，你的箭头函数等价于

(token: string) => return this.token = token

是的，那里有一个回报，并且由于分配而得到“美化”。

此规则的唯一两个选项是在存在括号时允许，或始终禁止。

因此，要解决您的“可读性问题”，请使用花括号，或尝试禁用规则（不推荐）。