Question

82

rated 0 times [ 86] [ 4] / answers: 1 / hits: 69566 / 9 Years ago, fri, january 22, 2016, 12:00:00

I use webpack path aliases for ES6 module loading.

E.g. If I define an alias for utils instead of something like

import Foo from ../../../utils/foo, I can do

import Foo from utils/foo

The problem is that once I start using aliases, WebStorm looses track of the import and I'm left with warnings and no auto-completion.

Is there a way to instruct WebStorm to use such aliases?

Only authorized users can answer the question. Please sign in first, or register a free account.

Total Points: 35

Total Questions: 117

Total Answers: 88

Location: Guernsey

Member since Tue, Jul 6, 2021

3 Years ago

trayvon questions

Sun, Apr 24, 22, 00:00, 2 Years ago

Wed, Feb 9, 22, 00:00, 2 Years ago

Sun, May 23, 21, 00:00, 3 Years ago

Tue, Jul 14, 20, 00:00, 4 Years ago

Thu, Jun 4, 20, 00:00, 4 Years ago

answered 9 Years ago josh · Accepted Answer

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).

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 ...