解决 ESLint 给出的错误：“Unexpected token”（预期之外的 token）
什么是 ESLint？
ESLint 是一个用于检查 JavaScript 代码中潜在错误和风格问题的工具。它可以帮助我们提高代码的质量和一致性，并减少调试的时间。
什么是 “Unexpected token”？
“Unexpected token” 是一个在编写 JavaScript 代码时非常常见的错误。它表明代码中出现了一个或多个不符合 JavaScript 语法规则的字符或关键字。这通常是由于编写错误或编程语言版本不兼容造成的。
如何解决 “Unexpected token” 错误？
检查代码中的语法错误
在面对 “Unexpected token” 错误时，首先应该检查代码中是否存在语法错误。JavaScript 语法非常严格，缺少一个分号或括号都可能导致代码无法正确解析。在编辑器中使用语法高亮功能或开启自动错误提示可以帮助我们快速定位代码错误。
解决版本不兼容问题
在使用不同的 JavaScript 版本时，一些关键字或特性可能会被认为是不符合语法规则的 “Unexpected token”。我们可以通过在项目中添加 .eslintrc.js 配置文件，指定使用的 JavaScript 版本来解决这个问题。例如，使用 ECMAScript 6 后，支持诸如箭头函数、let 声明、解构等新特性。我们可以将 .eslintrc.js 中的配置项修改为：
module.exports = {
parserOptions: {
ecmaVersion: 6,
},
}导入设置
如果在使用 import 或 export 等语句时出现 “Unexpected token” 错误，则意味着我们需要为项目指定更高的语言级别。我们可以将 .eslintrc.js 中的配置项修改为：
module.exports = {
parserOptions: {
sourceType: 'module',
},
}解决 JSX 中的错误
在使用 React 开发时，我们可能会在 JSX 中遇到 “Unexpected token” 错误。这通常是由于缺少对应的扩展插件造成的。我们可以在 .eslintrc.js 中的配置项中加入：
-- -------------------- ---- -------
-------------- - -
-------------- -
------------- -
---- -----
--
--
-------- ----------
-------- -----------------------------
-解决 HTML 中的错误
在使用 Vue 或 Angular 开发时，我们可能会在 HTML 中遇到 “Unexpected token” 错误。同样，这通常是由于缺少对应的扩展插件造成的。我们可以在 .eslintrc.js 中的配置项中加入：
-- -------------------- ---- -------
-------------- - -
-------------- -
------------ -----
----------- ---------
------------- -
---- -----
--
--
-------- --------
-------- ---------------------------
-示例代码
-- -------------------- ---- -------
-- ------------
-------------- - -
-------------- -
------------ --
----------- ---------
------------- -
---- -----
--
--
-------- --------- -------
-------- ---------------------------- --------------------------
-总结
“Unexpected token” 错误是在 JavaScript 编程中常见的错误之一。在遇到此类错误时，我们需要仔细检测所写代码的语法错误以及版本兼容性问题，并通过修改 ESLint 配置文件等方法来解决问题，提高代码质量和一致性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648a6e2048841e9894890469