Eslint Unable to resolve path to module ‘@‘

在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配置文件