Eslint Unable to resolve path to module ‘@‘

痛定思痛。 2022-11-06 15:55 409阅读 0赞

在webapck + eslint的项目中，若给webpack配置了alias，但eslint未能正确配置路径别名，则会报错。

  1. // webpack.config.js
  2.   resolve: { 
  3.     // 配置别名，在项目中可缩减引用路径
  4.     alias: { 
  5.       '@': path.resolve('app/web')
  6.     }
  7.   },

如上，在vue-cli初始化的项目中，已经为你配置好了，但若是自己搭建的项目，则可能出现标题中的错误，因为eslint并不会自动读取webpack中的配置。

此时需要安装以下eslint的插件：

  • eslint-plugin-import
  • eslint-import-resolver-webpack

并在.eslintrc.js中添加如下的配置

  1. // 务必注意路径的配置。
  2.   settings: { 
  3.     'import/resolver': { 
  4.       webpack: { 
  5.         config: path.join(__dirname, './build/webpack.base.config.js')
  6.       }
  7.     }
  8.   }

以上，即eslint会读取webpack的配置，因此便不会报错。

总结一下依赖的顺序

  1. ==> vscode eslint插件
  2.  ==> eslint
  3.  ==> eslint-plugin-import
  4.  ==> eslint-import-resolver-webpack
  5.  ==> 修改eslintrc配置文件

发表评论

表情：
评论列表 （有 0 条评论，409人围观）

还没有评论，来说两句吧...

相关阅读