[resolved] webpack configures eslint to report import/no-unresolved errors using airbnb-base

Business background

  • using mpvue to develop Mini Program
  • use airbnb eslint rules

problems encountered

  • because alias and extensions are configured in resolve of webpack .
  • caused an error when the module was introduced, saying that the specified module could not be found
  • but in fact these modules are all installed through npm

related codes

  • 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)
...

the effect of reporting an error is as follows

clipboard.png

my solution

  • disable this rule directly in "rules` in .eslintrc.js
  • but it doesn"t feel elegant
  • this should be because aliases and paths are configured in webpack, and eslint does not adapt to this rule.

question

can you directly set webpack to let eslint know that vue is an alias?

Aug.19,2021

npm install eslint-import-resolver-webpack

configure in .eslintrc.js :

  

the project I created with create-react-app still has problems with this method after eject

Menu