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

Goering

Answer 1

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

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

Grazing

This does not work for me. I have it like this "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["resources/js/*"] } }, – Ambulant

@Ambulant make sure your jsconfig.json and resources folder are in a same directory, then it should work. – Prominent

Yes, they are in the same directory but it still did not work. I ended up getting the correct answer from another question. #52432691 – Ambulant

Answer 2

You must add jsconfig.json file in root your project with paths parameter value:

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

jsconfig.json

structure of project

Decency