VSCode Vue3 Vite Javascript 导入别名地狱 - 无法让它按预期工作

Lia*_*ren 7 javascript import vue.js visual-studio-code

我就是无法休息。在我当前的设置中,我可以使用 @ 别名导入文件,但我无法在 .vue 的任何内容上单击 +cmd 来“转到定义”,除非我不使用“@”别名 - 没有它适用的别名.vue 文件我还突然丢失了 node_modules 包上的所有智能感知/导入/识别(即使我从 JSConfig 中删除了包含/排除)。

如果我评论/删除我的 JSConfig,我的 nodemodules intellisense 返回,但我无法在 .js 和 .vue 文件上单击 +cmd 来“转到定义”

所以无论我做什么我都无法让它发挥作用

我的预期结果是

  • 使用@alias自动完成
  • 单击 + cmd 转到 .js 和 .vue 文件上的文件
  • 从 node_modules 自动完成按预期工作并得到认可

我在这上面花了太多时间。我完全迷路了

以下是我的规格

jsconfig.json

{
    "compilerOptions": {
        "target": "ES6",
        "paths": {
            "@/*": ["src/*"]
        }
    },
    "exclude": ["dist", "node_modules"],
    "include": ["src/**/*", "src/**/*.js", "src/**/*.vue"]
}
Run Code Online (Sandbox Code Playgroud)

vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
// https://vitejs.dev/config/
/// <reference types="vitest" />
export default defineConfig({
    resolve: {
        extensions: [".js", ".json", ".vue", ".scss", ".css"],
        fallback: {
            crypto: path.resolve("crypto-browserify"),
            stream: path.resolve("stream-browserify"),
        },
        alias: {
            "@": path.resolve(__dirname, "./src"),
        },
    },
    plugins: [vue()],
    test: {},
    server: {
        port: 8080,
    },
    build: {
        sourcemap: false,
        assetsDir: "chunks",
    },
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@use  "sass:math"; @import "./src/assets/scss/v2/legacy.scss"; @import "./src/assets/scss/common.scss";`,
            },
        },
    },
});
Run Code Online (Sandbox Code Playgroud)

与使用 Volar 和 Path Intellisense 扩展以及 AutoImports 扩展(两者)进行导入有关的 VS Code 设置


  //* Intellisense
  "volar.autoCompleteRefs": true,
  "volar.codeLens.scriptSetupTools": true,
  "volar.codeLens.pugTools": true,
  "path-intellisense.autoTriggerNextSuggestion": true,
  "path-intellisense.extensionOnImport": true,
  "path-intellisense.autoSlashAfterDirectory": true,
  "path-intellisense.mappings": {
    "@": "${workspaceFolder}/src"
  },
  "autoimport.doubleQuotes": true,
  "autoimport.filesToScan": "**/*.{ts,tsx,js,vue,scss,css}",
  "autoimport.showNotifications": true
Run Code Online (Sandbox Code Playgroud)