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

冉娃娃
  • 1.2k

业务背景

  • 利用mpvue开发小程序
  • 使用airbnbeslint规则

遇到的问题

  • 因为在webpackresolve里面配置了aliasextensions
  • 导致在引入模块的时候报错,说是找不到指定模块
  • 但实际上这些模块都是通过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)
...

报错的效果图如下

clipboard.png

我的解决办法

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

问题

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

回复
阅读 24k
3 个回答
liximomo
  • 4.1k
✓ 已被采纳
npm install eslint-import-resolver-webpack

.eslintrc.js 中配置:

module.exports =  {
 settings: {
    'import/resolver': {
      webpack: {
        config: './path/to/your/webpack.config.js',
      },
    },
  },
 rules: {},
}
laev
  • 2
新手上路,请多包涵

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

npm install eslint-config-airbnb
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏