Visual Studio Code Intellisense et la saisie semi-automatique - Vite, JSconfig et alias - ne parviennent pas à trouver la bonne combinaison

Question

Je viens de recommencer à travailler avec Visual Studio Code après des années d'utilisation de PHPStorm/Webstorm

J'ai décidé de faire la transition simplement parce que VSCode est très léger et que je ne voulais pas m'appuyer sur un service payant/l'avoir sur chaque ordinateur puisque VSCode est presque partout et gratuit.

Je recommence

Vite+Vue3

Maintenant, j'ai quelques problèmes importer CTRL+clic - aller à la référence Saisie automatique

Mon Vite.config est le suivant - alias activé

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

Maintenant, avec juste la configuration vite, je peux importer en utilisant l'alias "@" - mais aucun intellisense ne se produit, Je ne peux pas effectuer l'importation automatiquement et je ne peux pas non plus faire ctrl + clic

Après avoir ajouté le fichier jsconfig.json

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

Je peux maintenant importer mes composants en utilisant "@" et également avoir une intelligence complète sur eux et je peux CTRL+cliquez dessus Cependant, maintenant j'ai perdu la possibilité d'importer des node_modules - j'ai perdu tout intellisense

Donc, si j'utilise mon vite/jsconfig, je peux ctrl+clic/compléter automatiquement l'alias "@" Mais j'ai perdu ma fonction d'importation node_module

Si je supprime ces configurations d'alias vite.config et supprime jsconfig J'ai récupéré l'intellisense node_module, mais j'ai perdu l'intellisense du projet.

Qu'est-ce qui me manque ici ? S'il vous plaît, aidez-moi à résoudre ce problème.

J'ai également supprimé toutes les extensions d'importation npm afin de pouvoir comprendre comment cela fonctionne

Answer 1

Problème dû au fichier jsconfig.json.

La présence de fichiers

dans un répertoire jsconfig.json indique que le répertoire est le répertoire racine du projet JavaScript. Le fichier jsconfig.json spécifie le fichier racine et les options pour la fonctionnalité fournie par le service de langage JavaScript (vscode).

La plupart du temps, vous n'en aurez pas besoin, mais il existe quelques exemples où vous pouvez l'utiliser, comme la Personnalisation IntelliSense. Exemple

Plus de détails :

jsconfig.json 是 tsconfig.json 的后代，后者是 TypeScript 的配置文件。 jsconfig.json 是 tsconfig.json，其中 "allowJs" 属性设置为 true 并且因为没有实际编译JavaScript 所必需的。这些属性存在是因为 jsconfig.json 是 tsconfig.json est un descendant de tsconfig.json, qui est le fichier de configuration TypeScript.

est tsconfig.json où la propriété "allowJs" est définie sur true et est obligatoire car il n'y a pas de compilation réelle de

JavaScripttarget. Ces propriétés existent car

est un descendant (juste) de tsconfig.json

Donc toutes les options ne sont pas identiques à

 : target 可以在 jsconfig.json

Cela étant dit, vscode IntelliSense peut être affecté par ces changements. Donc si vous le supprimez, tout fonctionnera comme prévu.

En d'autres termes,
peut affecter IntelliSense sur

. Pour votre cas il vous suffit d'ajouter ce qui suit :

jsconfig.json

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

vite.config.js

🎜

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

🎜Plus d'informations sur jsconfig.json de vscode : 🎜ici🎜🎜