vue.js - 带有 Eslint 的 Vite.js 上的 Vue 3 — 无法解析模块 eslint 的路径(import/no-unresolved)

Question

我在 Vite.js 上使用 Vue 3 和 Eslint + Airbnb 配置。 Airbnb 配置有一个规则 eslint(import/no-unresolved) , 这很好，但是 Eslint 不知道如何解析别名路径。
我想为路径使用别名——例如:import TableComponent from '@/components/table/TableComponent.vue'˙环境是纯 JavaScript。
我设法设置了我的 vite.config.js以便应用程序可以解析这样的路径:

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就是这样工作的，并且正确解析了导入路径，但是Eslint一直报错: Unable to resolve path to module eslint(import/no-unresolved)我如何以及在哪里可以告诉 Eslint 如何解析别名？
我试过了: 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'],
        ],
      },
    },
  },

但这不起作用。

编辑:
解决了这个问题，如果您像我一样使用纯 JavaScript，请参阅已接受的答案。
如果您使用的是 TypeScript，请查看 Seyd's answer能帮你。

Answer 1

我遇到了同样的问题，即使我修复了 src 路径，它仍然存在问题。直到我添加了扩展它才起作用:

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

        "extensions": [".js",".jsx"] <--- HERE
      }
    }
  },