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

I faced a similar issue with Visual Studio Code Intellisense and Autocomplete when using Vite, and import Aliases. After trying a few configurations without success, I made some tweaks that resolved the problem for me. Here's the working combination:

tsconfig.json:

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

vite.config.ts:

import path from 'path';

export default {
  resolve: {
    alias: {
      "@components": path.resolve(__dirname, "./src/components"),
    },
  },
};

Make sure to include these configurations in your tsconfig.json and vite.config.ts files, and Intellisense and Autocomplete should work as expected. Hope this helps!