前言
在前端项目开发中，我们经常会使用代码检查工具ESLint来检查代码风格、错误等。但有时候，在导入模块时，我们会遇到这样的错误：“Missing file extension ".js" for import”，这个错误让很多开发者感到困扰。
本文将会介绍这个错误的背景知识、原因以及解决方法，并通过示例代码展示如何规避这个问题。
什么是ESLint
ESLint是一个JS/JSX检查工具，它可以检查你的代码是否存在可能发生错误的语法，以及是否符合规范。ESLint支持定制化的规则，也可以使用别人的规则集合。
什么是“Missing file extension ".js" for import”
这个错误是ESLint在使用ES6的import语句时报出的。具体来说，当我们想要导入一个.js文件时，如果我们在import语句中没有指定文件后缀名，那么ESLint就会报出这个错误。
我们先来看一下这个错误的一个示例：
------ --- ---- -------
在这个示例中，我们想要导入一个名为foo.js的文件，但是我们没有在import语句中指定文件后缀名.js，这时ESLint就会给出如下错误提示:
------- ---- --------- ----- --- ------ -----------------
解决方法
方法一：使用文件后缀名
最简单的方法是在import语句中指定文件后缀名。修改上面的示例代码如下：
------ --- ---- ----------
这样就可以避免Missing file extension ".js" for import的错误了。
方法二：在ESLint配置文件中配置
ESLint提供了一个配置项import/resolver来解决这个问题。通过该项的设置，我们就可以在导入模块时不再需要指定.js后缀名。
我们可以在.eslintrc或.eslintignore或eslint.config.js中进行如下配置：
----------- -
------------------ -
------- -
------------- -
------
------
-
-
-
-这意味着ESLint会自动按照指定的后缀名搜索文件。这样，我们就不用在每个import语句中都加上文件后缀了。
方法三：使用默认后缀名
另一种解决方法是在系统上默认加上.js后缀名。如果使用Linux/MacOS系统，我们可以在.bashrc中加入以下代码：
------ ----------------------------------------
这样，我们就可以在导入模块的时候，不再需要指定后缀名。例如：
------ --- ---- -------
结论
在使用ES6的import语句导入模块时，如果我们没有指定文件后缀名，则ESLint会报出Missing file extension ".js" for import的错误。我们可以通过在import语句中指定文件后缀名、在ESLint配置文件中进行配置或者在系统上默认加上.js后缀名来解决这个问题。
最后，希望本文的讲解可以帮助大家更好地理解ESLint报错："Missing file extension ".js" for import"。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6717978bad1e889fe2228b1a