ESLint 报错：Expected parentheses around multiline arrow function arguments，怎么办？

前端开发过程中需要使用 ESLint 工具来检查代码规范性，但使用时会出现一些报错，如 Expected parentheses around multiline arrow function arguments 。这是因为在箭头函数中没有加括号导致的，本文将详细介绍这个问题和解决方法。

问题描述

在使用 ESLint 工具时，我们经常会遇到这样的报错提示：

Expected parentheses around multiline arrow function arguments

这个提示在对多行参数的箭头函数进行检查时出现。下面的示例即可触发此提示：

const func = (a, b, c) =>
    console.log(a, b, c)

由于箭头函数是没有自己的 this， arguments 参数的，因此如果要实现多行参数的箭头函数，需要使用括号 () 将参数括起来，如下：

const func = (a, b, c) => {
    console.log(a, b, c)
}

但如果不加括号，会使 ESLint 报出上述的提示。

解决方法

为了解决这个问题，我们需要在如下两个方面进行操作：

1.配置 settings

我们可以在配置文件中加入参数的规则，来让 ESLint 更好的理解我们的代码。具体来说，我们需要在配置文件中加入如下设置：

"arrow-parens": ["error", "as-needed"]

这个设置表示，箭头函数的括号将根据需要添加。这是 ESLint 默认的设置。除 "as-needed" 规则之外，还可以设置 "always" 规则，表示箭头函数参数必须加括号。

2.使用括号

也可以按照提示，给多行箭头函数参数添加括号。如下：

const func = (a, b, c) => {
    console.log(a, b, c)
}

总结

在使用 ESLint 工具时，要注意多行参数箭头函数需要使用括号进行包装，避免出现误报。同时也可以在配置文件中加入参数的规则以便使用，提高开发效率。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65307fe37d4982a6eb1ff9b9