Make VSCode works with your custom Webpack aliases

Here is a project folder tree, I just a guy contribute on it, can't change the structure. I love VSCode so much, but it seems never got the same level on the professional like WebStorm does. But I usually try to get things done on my favorite editor instead changing to the new IDE.

.
|__app/
|__internals/
|  |__webpack/
|     |__webpack.dev.config.js (by env)
|     |__webpack.prod.config.js (by env)
|     |__webpack.base.config.js (main config is in here)
|
|__webpack.config.js (proxys to internal/webpack/webpack.[env].config.js)

You can imaging it has a link here:

>> webpack.config.js 
- require webpack.dev.config.js
>> webpack.dev.config.js 
- loads webpack.base.config.js
- webpack.dev.config.js has it own configurations

Problem: The ESLint config use "webpack" for "import/resolver", but my VSCode cannot detect it. In this case, the aliases are @app and @internals, they should indicate for ./app and ./internal when I use import statement. And auto complete should works.

I just found some ways to deal with this problem. I really appreciate their answers, good people on the internet.

Option 1:

From this answer: https://medium.com/@justintulk/solve-module-import-aliasing-for-webpack-jest-and-vscode-74007ce4adc9#9b0b

Use jsconfig.json as a way to communicate to VSCode officially. Read more here: https://code.visualstudio.com/docs/languages/jsconfig (I even didn't read it).

I've done with this one:

1. Create jsconfig.json on root folder.
2. Add below content into file.

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@app/*": ["app/*"],
      "@internals/": ["internals/"]
    }
  },
  "exclude": ["dist", "some_dirs_dont_have_code"]
}

Option 2:

From this answer: https://stackoverflow.com/a/54939613/1155318

Use Path Intellisense extension, make your own workspace config work with extension: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

I've done with this one:

1. Install the extension.
2. Add this one to Workspace setting.

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

Difference

Option 1

• Folder suggestion by auto-complete works well.
• You can click on imported path to go to destination file.

Option 2

• Folder suggestion by auto-complete works well
• It does not have a link to destination file, then you can't click on imported path.
• But this extension can help you in many cases, not only on import statement of .js files.

Finally

I don't have the conclusion, but I used Option 1 and still install Path Intellisense for other purposes. Hope anyone has the same problem can get it done by this synthesis post.

Comments

[smaqeelkazmi]

There is one problem which I'm facing using this technique,

1. Now VsCode recognize alias path very well but,
2. It doesn't recognize any other path which is not using an alias.

works: "@/component.js"
not working: "./component.js"

[Vuong]

I appreciate your sharing. For now, I can't check it by myself because I just involve into React with just some small stuffs and short term, not for now anymore. So, hope someone else can share how to solve this problem in future.