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@appand@internals,they should indicate for./appand./internalwhen 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 /@justintulk/solve-module-import-aliasing-for-webpack-jest-and-vscode-74007ce4adc9#9b0b

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

I've done with this one:

1. Createjsconfig.jsonon 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 /a/54939613/1155318

UsePath Intellisenseextension, make your own workspace config work with extension:https://marketplace.visualstudio /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.jsfiles.

Finally

I don't have the conclusion, but I usedOption 1and still installPath Intellisensefor other purposes. Hope anyone has the same problem can get it done by this synthesis post.