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.