Visual Studio Code Intellisense 和自動完成 - Vite、JSconfig 和別名 - 無法找出正確的組合

Question

在使用 PHPStorm/Webstorm 多年後，剛剛再次開始使用 Visual Studio 程式碼工作

我決定進行過渡，只是因為 VSCode 非常輕量級，而且我不想依賴付費服務/在每台電腦上都擁有它，因為 VSCode 幾乎無處不在並且免費。

我重新開始

Vite Vue3

現在我遇到了幾個問題 進口 CTRL 點擊 - 前往參考 自動完成

我的Vite.config如下 - 啟用別名

import { defineConfig } from "vite";
import { fileURLToPath, URL } from "url";
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: {
            "@": fileURLToPath(new URL("./src", import.meta.url)),
            img: path.resolve(__dirname, "./public/img"),
        },
    },
    plugins: [vue()],
    test: {},
    server: {
        port: 8080,
    },
    build: {
        sourcemap: false,
        minify: false,
        assetsDir: "chunks",
    },
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@use  "sass:math"; @import "./src/assets/scss/v2/legacy.scss"; @import "./src/assets/scss/common.scss";`,
            },
        },
    },
});

現在，僅透過 vite 配置，我就可以使用「@」別名導入 - 但沒有發生智慧感知， I can't autocomplete 進口 nor can I ctrl click

新增 jsconfig.json 檔案後

{
    "compilerOptions": {
        "target": "ESNext",
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"]
        }
    }
}

我現在可以使用“@”導入我的組件，並且對它們也有完整的智能感知，並且可以按住 CTRL 鍵並單擊它們 但是，現在我失去了導入 node_modules 的能力 - 失去了所有智能感知

所以，如果我使用我的 vite/jsconfig，我可以 ctrl click/自動完成「@」別名 但我失去了我的node_module導入功能

如果我刪除那些 vite.config 別名配置並刪除 jsconfig 我找回了 node_module 智慧感知，但失去了專案的智慧感知。

我在這裡缺少什麼？請幫我解決這個問題。

我還刪除了任何/每個 npm 導入擴展，以便我能夠理解它是如何工作的

Answer 1

由於 jsconfig.json 檔案而出現的問題。

目錄中存在 jsconfig.json 檔案表示該目錄是 JavaScript 專案的根目錄。 jsconfig.json 檔案指定 JavaScript 語言服務提供的功能的根檔案和選項 (vscode）。

大多數時候您不需要它，但有一些範例您可以使用它，例如IntelliSense 自訂。 範例

更多詳細資訊：

jsconfig.json 是 tsconfig.json 的後代，後者是 TypeScript 的設定檔。 jsconfig.json 是tsconfig.json，其中"allowJs" 屬性設定為true 並且因為沒有實際編譯JavaScript 所必需的。這些屬性存在是因為 jsconfig.json 是 tsconfig.json 的後代（只是）

因此，並非所有選項都與 target 相同：

話雖如此，vscode IntelliSense 可能會受到這些變更的影響。所以如果你刪除它，一切都會按預期工作。

換句話說，target 可以在 jsconfig.json 上影響 IntelliSense。

對於您的情況，您只需按以下方式新增：

jsconfig.json

#

{
   "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["src/*"]
      }
   }
}

vite.config.js

alias: {
  '@/': path.resolve(__dirname, './src')
}

有關 vscode 的 jsconfig.json 的更多資訊：此處