背景
在前端开发中，使用 ESLint 可以帮助我们发现代码中的潜在问题，并规范代码编写风格。然而在实际应用过程中，有时候会出现 Unexpected token 的问题，这通常是由于代码中存在语法错误导致的。本文将结合具体的代码示例，介绍如何解决这个问题。
问题表现
当我们在运行 ESLint 进行代码检测时，如果代码中出现语法错误，就会出现类似以下的提示信息：
- - ------- -- ------ - --------- - ------ - -------- ----------- ------- ---- --- ------- ------- ----------------------------------- --- ----- ------- ------ ---------- ----- -
其中，这段提示信息的关键部分是 Parsing error: Unexpected token {，这说明代码中存在语法错误，导致解析器无法解析。此时需要检查有无语法错误，并在代码中进行修复。
解决方法
检查代码语法错误
在解决 Unexpected token 问题之前，首先需要检查代码中是否存在其他的语法错误。我们可以使用编辑器自带的“语法检测”功能，也可以使用类似于 eslint 这样的工具进行检测。
如果代码中存在其他的语法错误，首先需要解决这些问题，才能进一步排查 Unexpected token 问题。
检查代码版本和配置
如果已确认代码中不存在其他的语法错误，那么可能是代码所使用的版本和配置不兼容导致的。比如，代码使用了某个 ES6 中的语法，但是使用的 babel 和 eslint 版本不兼容，就可能出现语法错误无法解析的情况。
此时可以尝试升级 webpack、babel、eslint 等工具的版本，或者修改相应的配置。
配置 ESLint
如果以上两个方法无法解决问题，那么就需要进行 ESLint 的配置了。下面是一些常见的配置方法：
修改 .eslintrc.js 文件
在项目的根目录中找到 .eslintrc.js 文件，将该文件中的 parserOptions 配置项设置为以下内容：
-------------- - -------------- ---- -
修改 package.json 文件
在 package.json 文件中的 eslintConfig 配置项中添加以下内容：
---------------- - -------------- ---- -
使用 polyfill
如果代码中使用了一些新的语法，而 eslint 没有对应的 polyfill，就会出现 Unexpected token 问题。此时需要使用相应的 polyfill 进行解决。
具体来说，在使用 ES6 中的语法时，可以使用 babel-polyfill。在使用 React 中的语法时，可以使用 @babel/preset-react。
示例代码
下面是一个示例代码，展示了如何使用箭头函数并解决 Unexpected token 问题：
----- --- - --- -- --- -------------- -- ---- - ---
在这段代码中，使用了箭头函数，并且在 map 方法中使用了箭头函数。如果代码中缺少了相应的 polyfill，就会出现 Unexpected token 问题，以及类似于以下的提示信息：
------- ------ ---------- ----- --
此时可以使用如下方式进行修改：
----- --- - --- -- --- ---------------------- - ------ ---- - -- ---
在这个示例中，我们将箭头函数改成了普通的函数，从而避免了 Unexpected token 问题。
总结
解决 ESLint 检测时出现 Unexpected token 的问题，需要先检查代码中是否存在其他的语法错误，然后再检查代码版本和配置，如果还无法解决问题，可以进行 ESLint 的配置以及使用相应的 polyfill。希望本文能够对大家解决类似问题时提供帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65040f4895b1f8cacd0cc412