解决 ESLint 使用 import 导入文件经常出现没有文件扩展名的问题

在前端开发中，使用 ESLint 进行代码检查是一项必备的工作。然而，有时在使用 import 导入文件时，ESLint 会报出没有文件扩展名的错误。这个问题看似简单，但实际上可以涉及到一些深度的问题。

问题描述

当使用 import 导入文件时，如果文件没有文件扩展名，例如：

import { foo } from './bar'

在使用 ESLint 进行代码检查时，会报出以下的错误：

"import/extensions": ["error", "never", { "json": "always", "svg": "always" }]
"bar" should have a file extension

这个错误的原因是，ESLint 默认使用了 import/extensions 规则，要求导入的文件名必须带有文件扩展名。

解决方法

解决该问题的方法有多种，下面介绍两种比较常用的方法。

方法一：修改 ESLint 配置

可以通过在项目根目录下的 .eslintrc.js 文件中修改 import/extensions 规则来解决此问题：

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

该配置的作用是，要求导入的文件必须带有文件扩展名，除了 JavaScript、JSON 和 Vue 文件。这样即可避免文件没有文件扩展名的问题。

方法二：添加 webpack 配置

如果使用 webpack 进行打包，也可以通过更改 webpack 配置来解决这个问题。在 webpack.config.js 中添加以下配置：

module.exports = {
  // ...
  resolve: {
    extensions: ['.js', '.json']
  }
}

这样在使用 import 导入文件时，webpack 将会按照配置规定的文件扩展名顺序依次查找文件，从而解决文件没有文件扩展名的问题。

总结

该问题看似简单，但实际上可以涉及到一些比较深度的问题。解决该问题的方法也不只一种，根据具体情况选择最适合自己的方法即可。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650292ae95b1f8cacdfd3b71