Eslint | eslint-plugin-import插件报了import/no-unresolved的错

Eslint | eslint-plugin-import插件报了import/no-unresolved的错「这是我参与11月更文挑战的第20天,活动详情查看:2021最后一次更文挑战」 在使用eslint的项目中,我们通常希望能够对 ES2015+ (ES6+) import/export的语法进行lin

「这是我参与11月更文挑战的第20天,活动详情查看:2021最后一次更文挑战

在使用eslint的项目中,我们通常希望能够对 ES2015+ (ES6+) import/export的语法进行linting,并防止文件路径和导入名称拼写错误的问题,很幸运当前社区存在这么个插件,它的名字是:eslint-plugin-import。使用它,可以执行以下命令:

npm i eslint-plugin-import

该插件定义了一些规则,如下:

  • 确保导入指向可以解析的文件/模块。(no-unresolved)
  • 确保命名导入对应于远程文件中的命名导出。(named)
  • 在给定默认导入的情况下,确保存在默认导出。(default)
  • 确保导入的命名空间在取消引用时包含取消引用的属性。(namespace)
  • 限制可以在给定文件夹中导入哪些文件 (no-restricted-paths)
  • 禁止使用绝对路径导入模块 (no-absolute-path)
  • 禁止require()使用表达式 (no-dynamic-require)调用
  • 防止导入其他模块的子模块 (no-internal-modules)
  • 禁止导入中的 webpack 加载器语法 (no-webpack-loader-syntax)
  • 禁止模块导入自身 (no-self-import)
  • 禁止模块将具有依赖路径的模块导入回自身 ( no-cycle)
  • 防止 import 和 require 语句中不必要的路径段 ( no-useless-path-segments)
  • 禁止从父目录 (no-relative-parent-imports)导入模块
  • 防止通过相对路径no-relative-packages导入包

在所有规则中,刚开始配置基本会遇到import/no-unresolved的eslint规则报错,原因很简单: eslint无法识别webpack的别名

webpack配置别名

别名,顾名思义就是,创建 import 或 require 的别名,来确保模块引入变得更简单。webpack中的配置一般如下:

// webpack配置文件
module.exports = {
  resolve: {
    alias: {
      assets: path.resolve(__dirname, '../src/assets')
    }
  }
}

此时项目中引用assets文件中的资源就变简单了。

// 原本需要这样,通过相对路径查找
import a from '../../src/assets/1.js'

// 现在只需要这样,路径采用别名,变简单了
import a from 'assets/1.js'

但是当我们使用Eslint时,此时会报错了,因为Eslit解析assets/1.js会报找不到文件,因为这个webpack的别名。因此我们需要进行解决。

解决方案

方案1

在规则中,直接忽略掉以别名为开头的文件,配置如下,虽然这种方式可以解决问题,但并不推荐,因为存在误伤的可能性。

module.exports = {
  // ignore配置webpack配置的别名
  "import/no-unresolved": [2, {"ignore": ["src"]}]
}

方案2

这是推荐采用的方法,将解析到的重新做个映射。

module.exports = {
   settings: {
    'import/resolver': {
      alias: {
        map: [
          // 这里参照webpack的别名配置映射
          ["src", '../src']
        ],
        // 告诉resolver-alias有哪些后缀的文件要解析
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'], 
      },
    },
  },
}

优化

以上2种方法解决方式,都要要到webpack的别名声明,那么值每次从webpack进行拷贝配置进行同步总是不合适的,不够高效,因此这里可以做个优化,动态从webpack配置取值。优化如下:

let webpackConfig = require('/路径/webpack.config.js')
if(typeof webpackConfig === 'function'){
   webpackConfig = webpackConfig()
}

/** 解决eslint不能处理webpack别名路径 */
let webpackPathAlias = webpackConfig?.resolve?.alias || {}
// 此时获取的便是别名参数映射了
webpackPathAlias = Object.keys(webpackPathAlias).map(key=>[key,webpackPathAlias[key]]

总结

至此便描述了eslint-plugin-import的规则用处,以及如何解决no-unresolved的问题。

今天的文章Eslint | eslint-plugin-import插件报了import/no-unresolved的错分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/22496.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注