Kod Visual Studio Intellisense dan autolengkap - Vite, JSconfig dan alias - tidak dapat mengetahui kombinasi yang betul

Question

Baru mula bekerja dengan Visual Studio Code semula selepas bertahun-tahun menggunakan PHPStorm/Webstorm

Saya memutuskan untuk membuat peralihan semata-mata kerana VSCode sangat ringan dan saya tidak mahu bergantung pada perkhidmatan berbayar/memilikinya pada setiap komputer kerana VSCode boleh didapati di mana-mana dan percuma.

Saya mulakan semula

Vite+Vue3

Sekarang saya ada sedikit masalah import CTRL+klik - pergi ke rujukan Autolengkap

Vite.config saya adalah seperti berikut - alias didayakan

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

Kini, dengan hanya konfigurasi vite, saya boleh mengimport menggunakan alias "@" - tetapi tiada intellisense berlaku, Saya tidak boleh autolengkap import mahupun ctrl + klik

Selepas menambah fail jsconfig.json

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

Saya kini boleh mengimport komponen saya menggunakan "@" dan juga mempunyai intellisense penuh di atasnya dan boleh CTRL+kliknya Walau bagaimanapun, kini saya telah kehilangan keupayaan untuk mengimport node_modules - kehilangan semua intellisense

Jadi jika saya menggunakan vite/jsconfig saya, saya boleh ctrl+klik/autolengkapkan alias "@" Tetapi saya kehilangan fungsi import node_module saya

Jika saya mengalih keluar konfigurasi alias vite.config tersebut dan memadam jsconfig Saya mendapat kembali intellisense node_module, tetapi kehilangan intellisense projek.

Apa yang saya hilang di sini? Tolong bantu saya menyelesaikan masalah ini.

Saya juga mengalih keluar mana-mana/setiap sambungan import npm supaya saya dapat memahami cara ia berfungsi

Answer 1

Masalah disebabkan jsconfig.json fail.

Kehadiran

fail dalam jsconfig.json direktori menunjukkan bahawa direktori tersebut ialah direktori akar projek JavaScript. Fail jsconfig.json menentukan fail akar dan pilihan untuk fungsi yang disediakan oleh Perkhidmatan Bahasa JavaScript (vscode).

Kebanyakan masa anda tidak akan memerlukannya, tetapi terdapat beberapa contoh di mana anda boleh menggunakannya, seperti IntelliSense Customization. Contoh

Maklumat lanjut:

jsconfig.json 是 tsconfig.json 的后代，后者是 TypeScript 的配置文件。 jsconfig.json 是 tsconfig.json，其中 "allowJs" 属性设置为 true 并且因为没有实际编译JavaScript 所必需的。这些属性存在是因为 jsconfig.json 是 tsconfig.json ialah keturunan tsconfig.json, iaitu fail konfigurasi TypeScript.

ialah tsconfig.json di mana sifat "allowJs" ditetapkan kepada true dan diperlukan kerana tiada kompilasi sebenar

JavaScripttarget. Sifat ini wujud kerana

ialah keturunan (hanya) tsconfig.json

Jadi tidak semua pilihan adalah sama seperti

: target 可以在 jsconfig.json

Memang, vscode IntelliSense mungkin dipengaruhi oleh perubahan ini. Jadi jika anda mengeluarkannya semuanya akan berfungsi seperti yang diharapkan.

Dalam erti kata lain,
boleh menjejaskan IntelliSense pada

. Untuk kes anda, anda cuma tambah seperti berikut:

jsconfig.json

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

vite.config.js🎜

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

🎜Maklumat lanjut tentang jsconfig.json vscode: 🎜di sini🎜🎜