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

Question

Just started working again with Visual studio code after years on PHPStorm/Webstorm

I've decided to take the transition just because of how lightweight VSCode is and because I don't want to rely on a paid service/having it on every computer since VSCode is almost everywhere and free.

I started fresh

Vite + Vue3

Now I've come across several issues with Imports CTRL+Click - goto reference Autocompletes

my Vite.config is as follows - to 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 vite config alone I can import using the "@" alias - but no intellisense is taking place, I can't autocomplete imports nor can I ctrl + click

After adding a jsconfig.json file

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

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

So, if I use my vite/jsconfig I can ctrl+click/have auto complete on "@" alias but I lost my node_module import capabilities

If I remove those vite.config alias configuration and remove jsconfig I get back node_module intellisense and lost my project's intellisense.

What am I missing here? please help me figure this out.

I've also removed any / every npm import extension just so that I can understand how this works

Answer 1

The problem that you have here because of jsconfig.json file.

The presence of jsconfig.json file in a directory indicates that the directory is the root of a JavaScript Project. The jsconfig.json file specifies the root files and the options for the features provided by the JavaScript language service ( vscode ).

Most of the time you don't need it, but there is some examples where u can use it like IntelliSense customization . examples

more details:

jsconfig.json is a descendant of tsconfig.json , which is a configuration file for TypeScript. jsconfig.json is tsconfig.json with "allowJs" attribute set to true and since there is no actual compilation is required for JavaScript . These attributes exist because jsconfig.json is a descendant of tsconfig.json (just)

So, not all options are the same here like target :

The target setting changes which JS features are downleveled and which are left intact. For example, an arrow function () => this will be turned into an equivalent function expression if target is ES5 or lower.
Changing target also changes the default value of lib .

With that being said, vscode IntelliSense can be effected by those changes. so if u remove it, everything will works as expected.

In other words target can effect IntelliSense on jsconfig.json .

For your case, you just need to add it as following:

jsconfig.json

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

vite.config.js

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

For more reading about jsconfig.json for vscode: here

Answer 2

In your jsconfig.json file, you can try adding the following configuration to enable IntelliSense for node modules:

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

Answer 3

jsconfig.json

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

vite.conifg.js

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

import module like this:

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

when type @/ ，vscode give some path tips.