在近年来的前端开发中，ES6 箭头函数成为了非常流行的一种语法形式，因为它可以写出更简洁、更易读的代码。而在使用 ESLint 进行代码校验时，大家可能会发现 ES6 中的箭头函数没有被正确校验，导致出现一些语法错误。本篇文章将详细讲解为什么会出现这种情况，并给大家提供一些解决方案。
问题的原因
首先我们需要了解，ESLint 是通过 Esprima 或 Babel 这样的语法解析库来解析 JavaScript 代码的，而在 ES6 中，箭头函数是一种 Expression，它的语法也比较特殊。因此，在默认模式下，ESLint 只会通过 Esprima 来解析 ES6 代码，而 Esprima 并不能正确解析箭头函数语法。
解决方案
升级 ESLint 和 Esprima
如果你的项目仍在使用旧版本的 ESLint 或 Esprima，你需要先升级它们的版本。否则即使你配置了下面提到的解决方案也可能无效。
配置 parser 为 babel-eslint
在上面我们提到，ESLint 默认使用的是 Esprima 进行语法解析，而 babel-eslint 是将 Esprima 和 Babel 结合起来进行解析的一种工具。我们可以通过将 parser 配置为 babel-eslint 来解决 ESLint 无法校验箭头函数的问题。
module.exports = {
parser: "babel-eslint",
// your other config
};通过配置 parser 为 babel-eslint，ESLint 就可以正确解析箭头函数了。
修改 .eslintrc.js 的配置
在 .eslintrc.js 中，我们需要添加一些配置来使 ESLint 能够正确校验箭头函数的语法。
extends 配置
首先，我们需要将 ESLint 的 extends 配置替换为 eslint-config-airbnb-base，因为它已经自带了对 ES6 的支持。
module.exports = {
extends: ["airbnb-base"],
// your other config
};env 配置
其次，我们需要在 env 配置中加入 es6 配置项，它可以让 ESLint 接收 ES6 中的全局变量。
-- -------------------- ---- -------
-------------- - -
-------- ----------------
---- -
-------- -----
----- -----
---- -----
--
-- ---- ----- ------
--plugins 配置
最后，我们需要在 plugins 配置中添加新的 plugin-babel 插件，它将帮助 ESLint 支持更多的 ES6 语法特性。
-- -------------------- ---- -------
-------------- - -
-------- ----------------
---- -
-------- -----
----- -----
---- -----
--
-------- ----------
-- ---- ----- ------
--安装相关插件
除了修改配置之外，我们还需要安装一些插件以支持 ESLint 对箭头函数的校验。
babel-eslint
首先，我们需要安装 babel-eslint，它是负责将 Esprima 和 Babel 结合起来进行解析的工具。
npm i -D babel-eslint
eslint-plugin-babel
然后，我们需要安装 eslint-plugin-babel 插件，它会为 ESLint 添加额外的语法校验规则。
npm i -D eslint-plugin-babel
实际应用
最后，我们可以通过一个简单的例子来验证我们的配置是否奏效。
const fn = () => {
const name = "John";
console.log(`Hello, ${name}!`);
};
fn();在执行 ESLint 校验时，将会输出以下信息：
$ eslint index.js 1:7 error 'fn' is defined but never used no-unused-vars 1:14 error Parsing error: Unexpected token => babel/no-invalid-this ✖ 2 problems (2 errors, 0 warnings)
可以看到，箭头函数已经被正确地解析了，并且 ESLint 能够正确判断出代码中的语法错误。
总结
使用 ESLint 进行代码校验是一种非常好的习惯，它可以帮助我们避免一些常见的语法错误，提高代码的质量。在使用 ESLint 进行校验时，如果发现箭头函数没有被正确校验，我们可以采取上面提到的解决方案来解决。希望这篇文章能够帮助大家在前端开发中解决这个问题，提高自己的代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f31c9af6b2d6eab3c9d7b6