ESLint 是一个广泛使用的 JavaScript 代码静态检查工具，它可以在编写代码的过程中自动检测代码中的潜在问题，并给出建议。然而，在使用 ESLint 进行前端开发时，你可能会遇到“Import declarations are not supported”这样的错误信息。这篇文章将介绍如何解决这个问题。
错误原因
在 JavaScript 中，ES6 增加了模块化的支持，方便模块间的导入和导出。模块化代码中常常用 import 语句来引入其他模块的内容。然而，早期的 JavaScript 版本并不支持 ES6 的新特性，这就导致了一些 JS 后端框架无法支持 import 语句，如 Node.js。
如果你在使用 ESLint 检查带有 import 语句的代码时，你可能会遇到如下所示的错误信息：
eslint error: Parsing error: 'import' and 'export' may appear only with 'sourceType: module'
这是因为 ESLint 默认解析的是 ES5 的语法，而不是 ES6 的语法。因此，需要进行配置来解决这个问题。
解决方法
在使用 ESLint 进行前端开发时，我们建议使用 babel-eslint 插件来支持 ES6 语法。具体操作步骤如下：
第一步：安装必要的插件
打开终端或命令行窗口并输入以下命令：
npm install --save-dev eslint babel-eslint eslint-plugin-import
这里我们需要安装的插件有三个：babel-eslint、eslint 和 eslint-plugin-import。注意，这里我们应该以 dev 依赖的方式进行安装。
第二步：配置 ESLint
在项目的根目录下创建一个 .eslintrc 文件并添加如下代码：
-- -------------------- ---- -------
-
--------- ---------------
---------------- -
------------- ---------
-------------- --
--------------- -
------ ----
-
--
---------- -
--------
--
-------- -
------- --------
------------- -------
----------------------- --------
--------------- --------
----------------- --------
------------------- -------
-
-这样就可以将 ESLint 配置为支持 ES6 语法了。其中，我们指定了 parser 选项为 babel-eslint，同时设置了项目中的语言特性为 ES6 和 JSX。
第三步：重启代码编辑器
重启编辑器，使得新的配置生效。
示例代码
下面是一个示例代码，其中用到了 import 语句：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
----- ----- ------- --------------- -
-------- -
------ -
---------- -----------
--
-
-
---------------------- --- ---------------------------------完成上述配置之后，再进行 ESLint 检查时就不会再出现前述的错误信息了。同时，ESLint 也能够根据配置文件对代码进行检查和提示，让我们写出更加规范、易读、易维护的代码。
总结
本文介绍了如何使用 ESLint 进行前端开发的规范化，通过安装插件和配置文件解决了 import 语句不支持的问题。基于 ESLint 工具，我们可以清晰地看到代码的问题和解决方案，有利于提高代码质量和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648bc26248841e9894a0d01e