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

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


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

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

eslint-plugin-import
eslint-import-resolver-webpack
并在.eslintrc.js中添加如下的配置

// 务必注意路径的配置。
  settings: {
    'import/resolver': {
      webpack: {
        config: path.join(__dirname, './build/webpack.base.config.js')
      }
    }
  }


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

总结一下依赖的顺序

 ==> vscode eslint插件
 ==> eslint
 ==> eslint-plugin-import
 ==> eslint-import-resolver-webpack
 ==> 修改eslintrc配置文件
 

Logo

前往低代码交流专区

更多推荐