How to use intellisense with at symbol ('@') in Vite?

Question

Using a Vite app I can include this in my vite.config.js:

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

which allows me to use the '@' symbol (at character) for path names. This lets me have imports that look like this:

import Home from "@/pages/Home.vue";

As opposed to this:

import Home from "../../../pages/Home.vue";

The problem is that intellisense won't show up in any meaningful way when using the '@' path but it will when I use the '..' path. How do I enable path intellisense starting with '@'

Pictures to clarify what I mean by "intellisense won't show up in any meaningful way when using the '@' path": Using '..' path

Using '@' path

Answer 1

You also need to tell vscode with jsconfig.json or tsconfig.json file, for example:

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