ESLint 报错：Unexpected token import

在前端开发过程中，我们经常会使用新的语法和功能，例如 ES6 的 import/export 语法，但当我们使用 ESLint 进行代码检查时，有时会遇到 "Unexpected token import" 错误，导致代码无法正常运行。本文将详细解释这个错误，以及如何解决它。

Unexpected token import 是什么错误

当我们使用 import/export 语法时，它实际上是一个新的语法，而在旧版的 JavaScript 中，这种语法是不允许的。因此，在 JavaScript 代码中，如果包含 import/export 语法，而使用的代码检查工具不支持新的语法，则会出现 "Unexpected token import" 错误。

这个错误说明了在代码中出现了一个无法预期的标记 "import"，因为对于检查工具而言，它不是一个有效的标记。

如何解决 Unexpected token import 错误

要解决这个问题，我们需要使用一个支持 ES6 语法的代码检查工具，例如使用 eslint-plugin-import 插件并将其配置为支持 ES6 语法。以下是如何配置 ESLint 和 eslint-plugin-import。

步骤 1：安装 ESLint 和 eslint-plugin-import

--- ------- ------ -------------------- ----------

步骤 2：在 .eslintrc.js 文件中添加以下内容

-------------- - -
  ------ -
    ---------- -----
    ------ ----
  --
  ---------- ---------------------
  ---------------- -
    ------------- ---------
    -------------- ----
  --
  ---------- -----------
  -------- -
    ----------------------- --- - ----------- ---- --
  -
-

在这个配置文件中，我们使用了 eslint-plugin-import 插件并设置了 sourceType 为 "module"，表示代码采用了 ES6 的模块化导入语法。同时，我们还添加规则 "import/no-unresolved" 来检查导入的模块是否存在。

步骤 3：在 IDE 中配置 ESLint 插件

如果你使用的是 Visual Studio Code，可以在插件市场中搜索 "ESLint" 并安装。在安装完成后，你可以在项目目录下创建 .vscode/settings.json 配置文件，并添加以下内容。

-
  ---------------- -----
  ----------------- -
    ------------- --------------
  -
-

这个配置文件表示在 VS Code 中启用 ESLint，并将配置文件指定为 .eslintrc.js。

当你完成以上配置后，你可以重新构建项目，ESLint 将不再报告 "Unexpected token import" 错误，因为它现在能够理解 ES6 模块导入语法。

总结

在本文中，我们详细讲解了如何解决 ESLint 报错的 "Unexpected token import" 错误。我们了解了这个错误的原因，并提供了使用 eslint-plugin-import 插件来支持 ES6 语法的配置方法，以及在 Visual Studio Code 中配置 ESLint 插件的方法。希望这篇文章能帮助你在 JavaScript 语言的学习和开发中更加得心应手。

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

阅读全文

精选内容

相关推荐

    暂无