在前端开发中，我们经常会使用 ESLint 来检查代码的规范性和错误。但是，在使用 ESLint 进行代码检查时，有时会遇到 “Unexpected token” 错误，这会导致代码无法通过检查，从而影响开发效率。本文将介绍如何解决 ESLint “Unexpected token” 错误，帮助大家更好地使用 ESLint 进行代码检查。
什么是 “Unexpected token” 错误
在 JavaScript 中，当解析器遇到无法识别的字符或语法时，会抛出 “Unexpected token” 错误。这个错误通常会在编译阶段出现，表示代码存在语法错误。ESLint 作为一个代码检查工具，也会检查代码中是否存在语法错误，因此当代码中存在 “Unexpected token” 错误时，ESLint 会发现并报错。
解决 “Unexpected token” 错误的方法
1. 检查代码语法
首先，我们需要检查代码中是否存在语法错误。在代码中可能存在以下情况：
- 缺少括号、引号、分号等符号
- 函数或语句未正确闭合
- 使用了未定义的变量或函数等
如果代码中存在这些语法错误，我们需要及时修正，以确保代码能够被正确解析。
2. 检查代码版本
如果代码中不存在语法错误，那么我们需要检查代码的版本是否符合规范。ESLint 支持多个版本的 ECMAScript 规范，包括 ES5、ES6 等。如果代码中使用了不支持的语法或特性，ESLint 会报 “Unexpected token” 错误。因此，我们需要检查代码是否使用了正确的 ECMAScript 规范版本。
3. 配置 ESLint 规则
ESLint 提供了一系列的规则，用于检查代码的规范性和错误。这些规则可以通过配置文件进行设置。如果代码中使用了一些非标准的语法或特性，我们可以通过修改规则来允许这些语法或特性。例如，如果我们想要使用 ES6 的箭头函数，可以在配置文件中添加以下规则：
{
"rules": {
"arrow-parens": 0,
"arrow-body-style": 0
}
}这样，ESLint 就会允许我们使用箭头函数，并不再报 “Unexpected token” 错误。
4. 添加插件
如果代码中使用了一些特定的语法或框架，ESLint 可能无法识别这些语法，从而报 “Unexpected token” 错误。这时，我们可以添加相应的插件来扩展 ESLint 的识别能力。例如，如果我们使用了 Vue.js 框架，可以添加以下插件：
{
"plugins": [
"vue"
],
"extends": [
"plugin:vue/essential"
]
}这样，ESLint 就可以识别 Vue.js 中的语法，并不再报 “Unexpected token” 错误。
示例代码
以下是一个示例代码，其中包含了 “Unexpected token” 错误：
const foo = bar => {
console.log('Hello, world!')
}
foo()在这个代码中，我们使用了 ES6 的箭头函数，但是 ESLint 报出了 “Unexpected token” 错误。为了解决这个问题，我们可以添加以下配置文件：
{
"rules": {
"arrow-parens": 0,
"arrow-body-style": 0
}
}这样，ESLint 就会允许我们使用箭头函数，并不再报 “Unexpected token” 错误。
总结
“Unexpected token” 错误是常见的 ESLint 报错之一，通常表示代码存在语法错误或使用了不支持的语法或特性。为了解决这个问题，我们需要检查代码语法、版本、配置规则和添加插件等。通过这些方法，我们可以更好地使用 ESLint 进行代码检查，提高代码质量和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6511a7bf95b1f8cacda324c2