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

Question

在 PHPStorm/Webstorm 上工作多年后，才重新開始使用 Visual Studio Code

我決定進行轉換只是因為 VSCode 的輕量級，並且因為我不想依賴付費服務/在每台計算機上安裝它，因為 VSCode 幾乎無處不在且免費。

我重新開始

Vite+Vue3

現在我遇到了 Imports CTRL+Click 的幾個問題 - goto reference Autocompletes

我的 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 配置，我可以使用“@”別名導入 - 但沒有智能感知發生，我不能自動完成導入，也不能 ctrl + click

添加jsconfig.json文件后

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

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

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

如果我刪除那些 vite.config 別名配置並刪除 jsconfig，我會取回 node_module intellisense 並丟失我的項目的 intellisense。

我在這里錯過了什么？ 請幫我弄清楚。

我還刪除了任何/每個 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一樣：

target設置會更改哪些 JS 功能被降級，哪些保持不變。 例如，如果目標是 ES5 或更低版本，箭頭函數 () => this 將變成等效的函數表達式。
更改target也會更改lib的默認值。

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

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

對於您的情況，您只需按以下方式添加：

jsconfig.json文件

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

vite.config.js

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

有關 vscode 的 jsconfig.json 的更多閱讀：這里

Answer 2

在您的 jsconfig.json 文件中，您可以嘗試添加以下配置來為節點模塊啟用 IntelliSense：

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

Answer 3

jsconfig.json文件

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["./*"],
      "#c": ["./components/index"]
    }
  }
}

vite.config.js

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

像這樣導入模塊：

import { useMouseFollower, useMouse } from '@/hooks' // import hool from hooks/index.js

當輸入@/時，vscode 會給出一些路徑提示。