72

I'm working with Webpack and Visual Studio Code and in order to avoid things like:

import { AuthenticationService } from '../../../services/authentication/service';

I've created aliases on my webpack.config so I can use:

import { AuthenticationService } from 'services/authentication/service';

However, by doing so Visual Code is not able to detected my code and therefore I lose the intelisense for my classes.

Does anyone have a solution for that, is there a way to make VS code to read the webpack.config and recognize the path with the alias?

thanks in advance

2
  • I do have VSCode (1.3.1) recognizing webpack's aliases in js files. Aliases do not work in typescript. Are you talking about javascript or typescript?
    – viskin
    Jul 18, 2016 at 11:45
  • yes I'm using typescript.
    – Mush
    Jul 19, 2016 at 23:08

6 Answers 6

41

update typescript@2.0.0 and you can map the same webpack aliases on tsconfig.json by adding:

"compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "app/*": ["src/app/*"]
    }
}
1
  • 14
    Anyway of doing this with jsconfig? Paths option doesn't seem to have any affect here
    – wazzaday
    Dec 24, 2016 at 21:59
27

I ran into a similar issue. Because I was using javascript rather than typescript, I had to create a jsconfig.json file and use the paths option appropriately.

Assuming a directory structure like this:

.
├── src
│   ├── foo.js
│   ├── jsconfig.json # your vscode js config
│   └── my-module     # folder you're aliasing
│       └── bar.js
└── webpack.config.js # your webpack config

This wound up working for me:

  1. Set up webpack resolve alias:

    var path = require('path');
    module.exports = {
      resolve: {
        alias: {
          "my-module": path.resolve(__dirname, './src/my-module')
        }
      },
      // ... other webpack options
    };
    
  2. Modify jsconfig.json in your src folder:

    {
      "compilerOptions": {
        "target": "es6",
        "paths": {
          "my-module": ["./my-module"]
        }
      }
    }
    
  3. Use the alias:

    // in foo.js
    import Bar from 'my-module/bar';
    Bar.quack();
    
3
  • how about import javascript file directly?
    – c0ming
    Aug 8, 2017 at 9:53
  • this worked for me. But not on all components. 60% of my files are being suggested.
    – AO19
    Feb 7, 2018 at 13:19
  • 7
    This works but I had to add the path with the wildcard as "styles/*": ["./src/components/styles/*"], as expressed in the documentation jsconfig.json Reference
    – luis19mx
    Aug 16, 2020 at 15:44
18

Install VSCode extension PathIntellisense .

To open your VSCode setting file, you can press command+, on macOS(on Windows is ctrl+,), find "a pair of curly brackets button" on the top right corner, click it.

In my situation, I want to use the symbol @ as an alias of the path ./src . So I add this configuration to my VSCode setting file:

  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  }

Use ${workspaceRoot} when the path should be relative to the current root of the current project.

You can find the official example here .


Original answer:

I use the VSCode extension PathIntellisense .

Configure this setting in my VSCode setting file.

Now VSCode could recognize the path with the alias.

3
  • 7
    I'm not actually sure why this was downvoted. While the OP did ask for tsconfig it is very possible that someone else, like me, was searching for this due to finding some bit of info pointing towards it being the only option to "teach" VSC about the aliases. Since this is specifically about VS Code it seems perfectly valid as an answer.
    – Jared
    Jun 13, 2019 at 15:08
  • 1
    @Jared Likely because the answer doesn't contain any actual information; it just links to the extension, making the answer essentially nothing more than "use PathIntellisense". Including more details and an example configuration in the answer itself would be a good step into making this an actual answer.
    – Herohtar
    Jul 26, 2019 at 5:07
  • Thanks, I appreciate this answer so much. Just note: by this way, it's not enough for indicate the destination path on click on imported path or exported name (should be done by jsconfig.json. It just helps for auto complete the path name suggestion.
    – Vuong
    Feb 29, 2020 at 17:00
15

You need to specify the paths and baseUrl fields in your jsconfig.json file.

{
    "compilerOptions": {
        "jsx": "react",
        "target": "ES6",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./",
        "paths": {
            "~/*": ["./app/*"]
        }
    },
    "exclude": [
        "node_modules"
    ]
}

See path mapping documentation

1
  • 2
    this is magic, i searched a lot but only this works Jul 27, 2021 at 6:20
3

Use Path Autocomplete extension for VSCode

It's better than PathIntellisense for me.

Just add Config:

  {
    "javascript.suggest.paths": false, // disable default suggestion
    "path-autocomplete.extensionOnImport": true,
    "path-autocomplete.pathMappings": {
    "@": "${folder}/src" //custom what you want
  },

Work screenshot

2
  • Where do I add this config?
    – Pixsa
    Sep 6, 2021 at 14:37
  • This worked for me. @Pixsa the settings to change are the vscode settings.json. I suggest you edit those settings based on the project needs. Edit the workspace settings instead of user settings. 1. ctrl + shift+ p 2. Look for workspace settings.json Add these lines abover Mar 14, 2022 at 15:28
2

My 2 cents since I needed to tune a little bit other solutions.

In our case, we defined at webpack.js

   alias: {
        '@components': paths.src + '/components/',
        '@styles': paths.src + '/styles/',
        '@utils': paths.src + '/utils/',
    },

So we use those alias as:

import { foo } from '@utils/date';

This jsconfig.json do the thing:

=> please note the /* as in @components/*

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@components/*": [
        "components/*"
      ],
      "@styles/*": [
        "styles/*"
      ],
      "@utils/*": [
        "utils/*"
      ],
    }
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.