How to make VSCode resolve "@" in imports

Question

I'm working in a Vue.js project that uses Webpack. Many imports use @ as an alias to src directory. How can VSCode be configured to resolve the alias and make intellisense work with those imports?

I have found in many places on the web how to setup aliases in VSCode, using jsconfig.json or tsconfig.json. I have tried configuring in both files and nothing seems to work.

My jsconfig.json:

{
  "compilerOptions": {
    "target": "es6",
    "allowSyntheticDefaultImports": false,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

I expected VSCode to resolve the alias in the path, making intellisense and peeking definition work.

Answer 1

In my current project, I have a jsconfig.json at the root containing this :

{
  "compilerOptions": {
    "target": "es2017",
    "allowSyntheticDefaultImports": false,
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
    }
  },
  "exclude": ["node_modules", "dist", "docs"]
}

and it works for me.

I don't know exactly what moduleResolution is doing in your conf, and my baseUrl is the root folder in my case.

The related doc for vs code : https://code.visualstudio.com/docs/languages/jsconfig#_using-webpack-aliases

Try it and tell me if it's working better ?