EsLint airbnb-base import/no-unresolved

Question

J'ai créé un projet en utilisant Vue-cli et j'ai décidé d'ajouter une configuration lint par défaut. Je ne suis pas sûr pourquoi, quand j'exécute la commande lint, j'obtiens ce qui suit:

erreur: Impossible de résoudre le chemin du module '@/components/HelloWorld.vue' (import/no-unresolved) à src/views/Home.vue:10:24:

Voici ma vue Home:

// @ est un alias pour /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "home",
  components: {
    HelloWorld,
  },
};

voici mon composant HelloWorld

export default {
  name: "HelloWorld",
};

Voici ma configuration eslint:

{
  "env": {
    "node": true,
    "browser": true,
    "es6": true
  },
  "extends": ["airbnb-base", "plugin:vue/essential", "@vue/prettier"],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "extends": "standard"
  },
  "rules": {},
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"],
        "extensions": [".js", ".jsx", ".vue"]
      }
    }
  }
}

Y a-t-il quelque chose qui ne va pas?

Answer 1

J'ai posté une solution pour le problème alias dans mon article Medium : https://medium.com/@agm1984/how-to-set-up-es-lint-for-airbnb-vue-js-and-vs-code-a5ef5ac671e8

C'est essentiellement ceci :

Installer :

npm install --save-dev eslint-import-resolver-alias

Laravel-mix (alias configuration Webpack)

mix.webpackConfig({
    resolve: {
        extensions: ['.js', '.vue'],
        alias: {
            '@': `${__dirname}/resources`,
            '~': path.join(__dirname, './resources/js'),
        },
    },
});

Notez la clé resolve si vous utilisez quelque chose d'ultra-sauvage comme "juste Webpack seul et non Laravel Mix"; il y aura une déviation standard de la syntaxe.

.eslintrc.json

{
    "env": {},

    "rules: {},

    "settings": {
        "import/resolver": {
            "alias": {
                "map": [
                    ["@", "./resources"],
                    ["~", "./resources/js"]
                ],
                "extensions": [".js", ".vue"]
            }
        }
    }
}

source : https://github.com/benmosher/eslint-plugin-import/issues/496

Answer 2

Vous pouvez résoudre ce problème en installant la bibliothèque suivante :

npm install eslint-import-resolver-webpack

Et ajoutez le paramètre suivant dans vos paramètres dans le fichier eslintrc, en dessous de "node" :

"webpack" : {
    "config": "chemin/vers/votre/fichier/webpack.config.js"
}

Cela permettra de traiter votre fichier webpack.config.js afin de savoir quelle configuration vous utilisez dans le projet.