在使用 ESLint 进行代码检查时，我们可能会遇到 "Unexpected token import" 的错误，这是因为 ESLint 默认不支持 ES6 的模块导入语法。本文将介绍解决这个错误的方法，并探讨一些相关的知识点。
问题描述
当我们使用 ES6 模块导入语法时，如下所示：
import React from 'react';
ESLint 会报错：
Unexpected token import
这是因为默认情况下，ESLint 只支持 CommonJS 的模块导入语法，不支持 ES6 的模块导入语法。那么如何解决这个问题呢？
解决方法
安装插件
我们可以通过安装插件来解决这个问题。常用的插件有 eslint-plugin-import 和 babel-eslint。其中，eslint-plugin-import 可以帮助我们检查 import/export 语句是否符合规范，而 babel-eslint 则可以让 ESLint 支持 Babel 的语法。
我们可以通过以下命令来安装这两个插件：
npm install eslint-plugin-import babel-eslint --save-dev
配置 .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 的模块导入语法。具体来说，我们需要进行以下配置：
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}这里的 @babel/preset-env 和 @babel/preset-react 分别用于支持 ES6 和 React 的语法。
示例代码
最后，我们给出一个示例代码，以便读者更好地理解如何解决 "Unexpected token import" 错误。
import React from 'react';
const App = () => {
return <div>Hello, world!</div>;
};
export default App;在这个示例代码中，我们使用了 ES6 的模块导入语法，导入了 React 模块，并导出了一个 App 组件。
结论
通过本文的介绍，我们了解了如何解决 ESLint "Unexpected token import" 错误，以及如何配置相关的插件和规则。同时，我们也深入探讨了 ES6 的模块导入语法和 Babel 的支持。希望本文能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6726ea492e7021665e1ba0e3