title: Vue 3 on Vite.js with Eslint — Unable to resolve path to module eslint(import/no-unresolved)
body: <p>I use Vue 3 on Vite.js with Eslint + Airbnb config. Airbnb config has a rule <code>eslint(import/no-unresolved)</code>, which is good, but Eslint doesn't know how to resolve alias path.</p>
  <p>I want to use aliases for paths — example:
  <code>import TableComponent from '@/components/table/TableComponent.vue'˙</code></p>
  <p>Environment is in plain JavaScript.</p>
  <p>I managed to set up my <code>vite.config.js</code> so that the app can resolve paths like this:</p>
  <pre><code>import path from 'path';
  import { defineConfig } from 'vite';
  
  // https://vitejs.dev/config/
  export default defineConfig({
    plugins: [vue()],
    resolve: {
      alias: [{
          find: &quot;@&quot;, replacement: path.resolve(__dirname, 'src')
        },],
    },
  });
  </code></pre>
  <p>Vue app works like that and resolves the import path correctly, but Eslint keeps reporting the error: <code>Unable to resolve path to module eslint(import/no-unresolved)</code></p>
  <p>How and where can I tell Eslint how to resolve aliases?</p>
  <p>I have tried:
  <code>install eslint-plugin-import eslint-import-resolver-alias --save-dev</code></p>
  <pre><code>// .eslintrc.js
  
  // ...
  extends: [
      'eslint:recommended',
      'plugin:import/recommended',
      'airbnb-base',
      'plugin:vue/vue3-strongly-recommended',
  ],
  
  settings: {
      'import/resolver': {
        alias: {
          map: [
            ['@', 'src'],
          ],
        },
      },
    },
  </code></pre>
  <p>But that doesn't work.</p>
  <hr />
  <p>EDIT:<br>
  Solved the issue, see the accepted answer if you're using plain JavaScript like I do.</p>
  <p>If you're using TypeScript, see if <a href="https://stackoverflow.com/a/69640843/12648269">Seyd's answer</a> can help you.</p>