Path aliases for imports in WebStorm

Question

Yes, there is.

In fact, Webstorm can’t automatically parse and apply Webpack config, but you can set up aliases the same way.

You just have to mark the parent folder of “utils” (in your example) as a resource root (right-click, mark directory as / resource root).

right click on folder

We just managed to do with the following structure :

/src
    /A
    /B
    /C

We have A B and C folders declared as alias in Webpack.
And in Webstorm we marked “src” as “Resource Root”.

And now we can simply import :

import A/path/to/any/file.js

instead of

import ../../../../../A/path/to/any/file.js

while still having Webstorm correctly parsing and indexing all code, link to files, autocompleting and so on …