Visual Studio Code Intellisense und Autovervollständigung – Vite, JSconfig und Aliase – können nicht die richtige Kombination finden

Question

Ich habe gerade wieder angefangen, mit Visual Studio Code zu arbeiten, nachdem ich jahrelang PHPStorm/Webstorm verwendet habe

Ich habe mich einfach für den Übergang entschieden, weil VSCode sehr leichtgewichtig ist und ich mich nicht auf einen kostenpflichtigen Dienst verlassen wollte bzw. ihn nicht auf jedem Computer haben wollte, da VSCode praktisch überall und kostenlos ist.

Ich fange wieder an

Vite+Vue3

Jetzt habe ich ein paar Probleme importieren STRG+Klick – zur Referenz gehen Automatische Vervollständigung

Meine Vite.config sieht wie folgt aus – Alias ​​aktiviert

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";`,
            },
        },
    },
});

Jetzt kann ich nur mit der Vite-Konfiguration mit dem „@“-Alias ​​importieren – aber es passiert kein Intellisense. Ich kann den Import weder automatisch abschließen noch kann ich Strg + Klicken drücken

Nach dem Hinzufügen der Datei jsconfig.json

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

Ich kann meine Komponenten jetzt mit „@“ importieren, habe volle Intelligenz über sie und kann sie bei gedrückter STRG-Taste anklicken Allerdings habe ich jetzt die Möglichkeit verloren, node_modules zu importieren – ich habe jeglichen Intellisense verloren

Wenn ich also mein vite/jsconfig verwende, kann ich den „@“-Alias ​​bei gedrückter Strg-Taste anklicken/automatisch vervollständigen Aber ich habe meine node_module-Importfunktion verloren

Wenn ich diese Vite.config-Aliaskonfigurationen entferne und jsconfig lösche Ich habe das node_module intellisense zurückbekommen, aber das intellisense des Projekts verloren.

Was fehlt mir hier? Bitte helfen Sie mir, dieses Problem zu lösen.

Ich habe auch alle NPM-Importerweiterungen entfernt, damit ich verstehen kann, wie es funktioniert

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 的更多信息：此处