Babel-plugin-module-resolver: Teach Microsofts VS Codes autocompletion about where to find the modules

[datenreisender]

You explain how to teach Atom or IntelliJ/WebStorm where to find the files specified with this plugin. It would be great, if you would also describe a way for Microsofts VS Code. Do you know how to achieve it in Code?

[tleunen]

I'm not a user of VSCode, but I will try to find the information and add it in the readme, unless someone finds it first.

[damonbauer]

@datenreisender @tleunen you can use the Path Intellisense extenion with the "path-intellisense.mappings" option to get what you need.

[tangkunyin]

@tleunen how to use autocompletion in IntelliJ/WebStorm?

[datenreisender]

@tangkunyin IntelliJ is described in the README and not in the scope of this issue.

[datenreisender]

@damonbauer The Path Intellisense extension helps with path names but not with the majority of Intellisense, e.g. with

import {someFunction} from 'utils/MyUtilFn';

the extension helps me to complete utils/MyUtilFn, but not to complete someFunction, does not support Cmd-click to jump to its definition (neither on filename nor on function) and not enable me to use rename symbol like on relative imports.

[tleunen]

@damonbauer @datenreisender - I'm trying again to find a good solution with vscode. I did try the plugin Path Intellisense, but it seems it only supports for alias?

How would you setup a root directory without having to alias all the sub files/directories?

[jgoux]

Hello,

I gave it a try tonight and it worked !

I mapped my src directory to ~ so I can access all my top folders like this :

import DB from '~/lib/database'
import { User } from '~/domain/user'

1. Teach VS Code's Intellisense where to look at

So you can jump to the definition and have autocompletion. ✨

To do that, create a jsconfig.json file at the root of your project :

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "~/*": [
        "src/*"
      ]
    }
  },
  "exclude": [
    "node_modules"
  ]
}

2. Teach VS Code to autocomplete your paths

Install the extension Path Intellisense

This extension allows the autocompletion of the custom paths.

Configure the extension in your project's settings under .vscode/settings.json :

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

3. Teach Babel how to resolve your custom paths

The last step is to install and configure babel-plugin-module-resolver so the code compile!

Here is my .babelrc :

{
  "plugins": [
    [
      "module-resolver",
      {
        "alias": {
          "~": "./src"
        }
      }
    ]
  ]
}

4. Profit

[harriswan9a]

@jgoux Thanks, it work for me.

[guilhermepontes]

Thanks @jgoux!

[datenreisender]

Thanks, @jgoux, for describing the correct solution. I incorporated that into PR #246, so others will also find it more easily.

[ebaranov]

Thanks @jgoux !

[rommyarb]

@jgoux THANK YOU VERY MUCH BROTHER! YOU SAVED ME! 😍

[kevinpatel20]

how to resolve js files with extensions like .native.js, .web.js , .android.js and .ios.js in path intellisense