EsLint airbnb-base import/no-unresolved

Question

I have a created a project using Vue-cli and I decided to add a lint configuration by default. I'm not sure why, when i run the lint command, i get the following:

error: Unable to resolve path to module '@/components/HelloWorld.vue' (import/no-unresolved) at src/views/Home.vue:10:24:

Here is my Home view:

<template>
  <div class="home">
    <HelloWorld></HelloWorld>
    Home
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "home",
  components: {
    HelloWorld,
  },
};
</script>

here is my HelloWorld component

<template>
  <div>Dea Formazione - registrazione</div>
</template>

<script>
export default {
  name: "HelloWorld",
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"></style>

here is my eslint config:

{
  "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"]
      }
    }
  }
}

Is there anything wrong?

agm1984 agm1984 · Accepted Answer · 2020-04-02T22:35:38

I posted a solution for the alias problem in my Medium article: https://medium.com/@agm1984/how-to-set-up-es-lint-for-airbnb-vue-js-and-vs-code-a5ef5ac671e8

It's basically this:

Install:

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

Laravel-mix (aka Webpack config)

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

Note the resolve key there if you are using something ultra-wild like “just Webpack by itself and not Laravel Mix”; there will be a standard deviation of syntax.

.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

EsLint airbnb-base import/no-unresolved

2 Answers