Visual Studio Code Intellisense and autocomplete - Vite, JSconfig and aliases - can't figure out the right combination

Question

Just started working with Visual Studio Code again after years of using PHPStorm/Webstorm

I decided to make the transition simply because VSCode is very lightweight and I didn't want to rely on a paid service/have it on every computer since VSCode is pretty much everywhere and free.

I start over

Vite Vue3

Now I have encountered several problems import CTRL click - go to reference automatic completion

My Vite.config is as follows - enable aliases

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

Now, with just the vite configuration, I can import using the "@" alias - but no intellisense happens, I can't autocomplete import nor can I ctrl click

After adding the jsconfig.json file

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

I can now import my components using "@" and also have full intellisense over them and can CTRL+click on them However, now I've lost the ability to import node_modules - lost all intellisense

So if I use my vite/jsconfig I can ctrl click/autocomplete the "@" alias But I lost my node_module import function

If I remove those vite.config alias configurations and delete jsconfig I got the node_module intellisense back, but lost the project's intellisense.

What am I missing here? Please help me solve this problem.

I also removed any/every npm import extension so I could understand how it works

Answer 1

Problem due to jsconfig.json file.

The presence of the

jsconfig.json file in the directory indicates that the directory is the root directory of the JavaScript project. The jsconfig.json file specifies the root file and options (vscode) for the functionality provided by the JavaScript Language Service.

Most of the time you won't need it, but there are some examples where you can use it, such as IntelliSense Customization. Example

More details:

jsconfig.json is a descendant of tsconfig.json, which is the TypeScript configuration file. jsconfig.json is tsconfig.json where the "allowJs" property is set to true and because no JavaScript# is actually compiled ## required. These properties exist because jsconfig.json is a descendant (just) of tsconfig.json

Therefore, not all options are the same as

target:

Having said that, vscode IntelliSense may be affected by these changes. So if you remove it everything will work as expected.

In other words,

target can affect IntelliSense on jsconfig.json.

For your case you just add as follows:

jsconfig.json

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

vite.config.js

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

More information about vscode's jsconfig.json:

here