Answer a question

I use Vue 3 on Vite.js with Eslint + Airbnb config. Airbnb config has a rule eslint(import/no-unresolved), which is good, but Eslint doesn't know how to resolve alias path.

I want to use aliases for paths — example: import TableComponent from '@/components/table/TableComponent.vue'˙

Environment is in plain JavaScript.

I managed to set up my vite.config.js so that the app can resolve paths like this:

import path from 'path';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [{
        find: "@", replacement: path.resolve(__dirname, 'src')
      },],
  },
});

Vue app works like that and resolves the import path correctly, but Eslint keeps reporting the error: Unable to resolve path to module eslint(import/no-unresolved)

How and where can I tell Eslint how to resolve aliases?

I have tried: install eslint-plugin-import eslint-import-resolver-alias --save-dev

// .eslintrc.js

// ...
extends: [
    'eslint:recommended',
    'plugin:import/recommended',
    'airbnb-base',
    'plugin:vue/vue3-strongly-recommended',
],

settings: {
    'import/resolver': {
      alias: {
        map: [
          ['@', 'src'],
        ],
      },
    },
  },

But that doesn't work.

EDIT:
Solved the issue, see the accepted answer if you're using plain JavaScript like I do.

If you're using TypeScript, see if Seyd's answer can help you.

Answers

In case someone runs into this problem, this works in my case*:

settings: {
    'import/resolver': {
      alias: {
        map: [
          ['@', './src'],
        ],
      },
    },
  },

*In my case, Vue's root is 'src' directory, while Eslint's is one level higher, so it needs the './src' path.

Huge thanks to @https://github.com/aladdin-add for the answer through the github question!