解决 ESLint "Unexpected token import" 错误的方法

在使用 ESLint 进行代码检查时,我们可能会遇到 "Unexpected token import" 的错误,这是因为 ESLint 默认不支持 ES6 的模块导入语法。本文将介绍解决这个错误的方法,并探讨一些相关的知识点。

问题描述

当我们使用 ES6 模块导入语法时,如下所示:

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

ESLint 会报错:

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

这是因为默认情况下,ESLint 只支持 CommonJS 的模块导入语法,不支持 ES6 的模块导入语法。那么如何解决这个问题呢?

解决方法

安装插件

我们可以通过安装插件来解决这个问题。常用的插件有 eslint-plugin-importbabel-eslint。其中,eslint-plugin-import 可以帮助我们检查 import/export 语句是否符合规范,而 babel-eslint 则可以让 ESLint 支持 Babel 的语法。

我们可以通过以下命令来安装这两个插件:

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

配置 .eslintrc 文件

安装完插件之后,我们需要在 .eslintrc 文件中进行配置。具体来说,我们需要进行以下配置:

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

这里的 parser 属性指定了使用 babel-eslint 作为解析器,parserOptions 属性指定了使用 ES6 和模块导入语法。plugins 属性指定了使用 eslint-plugin-import 插件,rules 属性则指定了相关的规则。

其中,import/no-unresolved 规则用于检查导入的模块是否存在,这里我们将其关闭;import/named 规则用于检查是否正确导入了命名导出的模块,import/default 规则用于检查是否正确导入了默认导出的模块,import/namespace 规则用于检查是否正确导入了命名空间导出的模块,import/export 规则用于检查是否正确使用了导出语法。

配置 .babelrc 文件

除了 .eslintrc 文件之外,我们还需要在 .babelrc 文件中进行配置,以便让 Babel 支持 ES6 的模块导入语法。具体来说,我们需要进行以下配置:

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

这里的 @babel/preset-env@babel/preset-react 分别用于支持 ES6 和 React 的语法。

示例代码

最后,我们给出一个示例代码,以便读者更好地理解如何解决 "Unexpected token import" 错误。

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

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

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

在这个示例代码中,我们使用了 ES6 的模块导入语法,导入了 React 模块,并导出了一个 App 组件。

结论

通过本文的介绍,我们了解了如何解决 ESLint "Unexpected token import" 错误,以及如何配置相关的插件和规则。同时,我们也深入探讨了 ES6 的模块导入语法和 Babel 的支持。希望本文能够对读者有所帮助。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6726ea492e7021665e1ba0e3