[已解决]webpack配置eslint使用airbnb-base报import/no-unresolved错误

Question

业务背景

• 利用mpvue开发小程序
• 使用airbnb的eslint规则

遇到的问题

• 因为在webpack的resolve里面配置了alias和extensions
• 导致在引入模块的时候报错,说是找不到指定模块
• 但实际上这些模块都是通过npm安装了的

相关代码

• webpack.base.conf.js

resolve: {
    extensions: [".js", ".vue", ".json"],
    alias: {
      "vue": "mpvue",
      "@": resolve("src")
    },
    ...
  },
module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: "eslint-loader",
        enforce: "pre",
        ...

• .eslintrc.js

module.exports = {
  parser: 'babel-eslint',
  extends: 'airbnb-base',
  ...

• main.js

import Vue from 'vue';  // => ESLint: Unable to resolve path to module 'vue'. (import/no-unresolved)
import App from './App'; // App实际是一个.vue文件 => ESLint: Casing of ./App does not match the underlying filesystem. (import/no-unresolved)
...

报错的效果图如下

我的解决办法

• 直接在.eslintrc.js里面的'rules`里面禁用这条规则
• 但是感觉并不优雅啊
• 这应该是由于在webpack里面配置了别名和路径,而eslint没有适配这个规则导致的

问题

能不能直接通过设置webpack来让eslint知道vue就是一个别名呢?

Answer 1

我也遇到这个问题了，用airbnb-base会出现这个问题，但是用完整的airbnb就不会了。

npm install eslint-config-airbnb

Answer 2

我用create-react-app创建的项目，eject后，用这个方法还是有问题

Answer 3

npm install eslint-import-resolver-webpack

在 .eslintrc.js 中配置:

module.exports =  {
 settings: {
    'import/resolver': {
      webpack: {
        config: './path/to/your/webpack.config.js',
      },
    },
  },
 rules: {},
}