How to use 'go to path' with aliases in VScode

Question

Using VScode I can go open a file that I am importing using CTRL + click into the import declaration:

By doing that the VScode will open the file index.js at the folder ./code

I also can create and export alias to some files using vue.config.js:

Then I can import using the alias:

The problem I want to solve is: How can I CTRL + click and open a file that were imported using alias?

There are any extensions that can do it?

It would be very useful, because when I need to edit the file I could go directly to it without having to manually look for the path.

Answer 1

You can configure the path aliases in VS Code with a jsconfig.json file (or tsconfig.json if using TypeScript).

Create <projectRoot>/jsconfig.json with the compilerOptions.paths option set to glob patterns that match the ones from Webpack's resolve.alias:

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@themeConfig": ["src/libs/themeConfig.js"],
      "@core/*": ["src/@core/*"],
      "@validations": ["src/@core/utils/validations/validations.js"],
      "@axios/*": ["src/libs/axios/*"]
    }
  }
}