Path aliases for imports in WebStorm

Question

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?

Solution 1

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

Solution 2

I managed to set up aliases for WebStorm 2017.2 within webpack like this:

Solution 3

For the record: in PHPSTORM, working with laravel mix, I managed to solve this by creating a webpack.config.js file separately like:

const path = require('path')
const webpack = require('webpack')
module.exports = {
  ...
  resolve: {
    extensions: ['.js', '.json', '.vue'],
    alias: {
      '~': path.resolve(__dirname, './resources/assets/js')
    }
  },
  ...
}

And then importing it in the webpack.mix.js like:

const config = require('./webpack.config')
...
mix.webpackConfig(config)

Make sure the webpack configuration file is pointed correctly in the configuration of the PhpStorm in: Settings > Languages & Frameworks > Javascript > Webpack

Solution 4

You can define custom paths, so WebStorm/PhpStorm can understand your aliases. But make sure, they are identical with your aliases. Create file in your root directory and call it something like this: webStorm.config.js (any js file will be ok). Then configure your paths inside:

System.config({
  "paths": {
    "components/*": "./src/components/*",
    "core/*": "./src/core/*",
    ...
  }
});

WebStorm/PhpStorm will recognize System as it's own module and will treat this file as configuration.

Solution 5

This is answered in a comment but to save people digging into comments and link only information, here it is:

As of WS2017.2 this will be done automatically. The information is here.

According to this, webstorm will automatically resolve aliases that are included within the webpack.config in the root of the project. If you have a custom structure and your webpack.config isn't in the root folder then go to Settings | Languages & Frameworks | JavaScript | Webpack and set the option to the config you require.

Note: Most setups have a base config which then call a dev or prod version. In order for this to work properly, you need to tell webstorm to use the dev one.

View more solutions

Comments

[maddrag0n]

this will effectively break things when not directly building from Webstorm

[Jalil]

Why is that ? If you keep the aliases in your Webpack configuration ... Actually we do build outside of Webstorm without any problem ...

[Bogdan D]

I haven't tested it yet, but the answer makes total sense. It was exactly what I was looking for when I asked the question. Thanks, @Jalil, I'm marking your answer "accepted"

[Zation]

I'ver tried in WebStorm 2016.2.3, but this solution doesn't work.

[Hitmands]

and what about imports in angular2 import { Component } from '@angular/core', that is resolved too. How can I implement the at to make more clear that path is an alias?

[Jalil]

@Zation I'm using Webstorm 2016.2.3 and it works pretty well. What problem do you have exactly ?

[lima_fil]

Don't forget to mark PARENT folder, not the starting folder of your path.

[Jalil]

Yes. I've just bolded it.

[anstarovoyt]

deprecated answer. Starting since WS2017.2 webstorm automatically parses and applies Webpack config

[thewoolleyman]

This is the better answer. Relative paths are annoying, but the convenience of path aliases is not worth losing useful IDE functionality.

[Jalil]

I added a deprecation notice.

[Toosick]

@anstarovoyt I installed the Webstorm EAP 2017.2 and it still cannot figure out my aliases. Do I have to do something?

[anstarovoyt]

@Toosick see this blogpost blog.jetbrains.com/webstorm/2017/06/…

[rofrol]

What about multiple folders and multiple webpack configs? Doesn't work for me maybe because of this: "By default WebStorm will analyse the webpack configuration file in the root of the project, but you can select another file in Preferences | Languages & Frameworks | JavaScript | Webpack" blog.jetbrains.com/webstorm/2017/06/…

[dericcain]

This seems to work unless a Webpack alias is used. I am using @ as an alias to my src folder, but even after pointing Webstorm to my config, it still would not resolve my imports correctly. However, once I marked the src folder as Resource Root, it worked as expected. Would be nice if Webstorm could handle aliases, but no big deal.

[dericcain]

Are you using a symbol for an alias like so: '@': '../src'). Also, are you using one file for your webpack config, or multiple? Wondering what is different. Thanks!

[webnoob]

One example of mine is '@': path.resolve(__dirname, '../src/components'). I use multiple files, webpack.base.conf.js then dev and prod versions. They in turn call a config folder with index.js, dev.env.js and prod.env.js. I point my webstorm to look at the webpack.dev.conf.js file.

[dericcain]

My setup is very similar (vue-webpack-pwa) and pointing it to the .dev.conf did the trick. Pointing to the .base.conf was not working. Good call!

[willredington315]

I think this may need an issue to be opened. I can confirm it works but oftentimes I'll open it and all of the webpack aliases are unresolved. I do an "Invalidate Caches and Restart" , and it works as advertised

[Alexander]

It works. The file should include module.exports = {resolve: {alias: {'@utils': path.resolve(__dirname, '../utils/')}}}. Also I had to restart WebStorm to apply the changes.

[Илья Зеленько]

Thanks! It helped me in PhpStorm 2019.1

[Dave Johansen]

How do you get Webstorm to recognize @someAlias correctly?

[Moein Alizadeh]

We should mark this answer to the best answer. Thanks.

[TomTomSamSam]

this one helped me

[Alberto Perez]

Thanks! Finally some solution for this annoying problem.

[Daniel]

Where file you defined alias? In which file?

[Kevin Bruccoleri]

Using the dev webpack config worked for me. Thanks!

[joycollector]

This actually works! Really helped me with the project on Rollup+Svelte!

[Mojtaba Hn]

thanks. it works. Q: Do you know any documentation for full options available for this file ?

[Szczepan Hołyszewski]

Please consider the situation of users who don't actually use webpack in their project, and want to set up those two files SOLELY for the purpose of teaching PHPStorm how to resolve aliases. Those people won't know what should go in the "..." in order to make the webpack.mix.js file actually working for this purpose. Specifically, if I simply remove "...", the mix symbol is reported as unresolved by the IDE, which is a strong hint that it won't actually work. There are missing but critically important lines where the "mix" symbol is somehow required/imported. Please add those to your answer.

[Szczepan Hołyszewski]

Don't rush to deprecate this answer. Accumulating experience shows that JetBrain's support for parsing Webpack config is fragile to the point of unusability. Old tricks must unfortunately still be used.

[Matt]

Is there a way to do this for a specific js file? So for example, I'd like to use "config" in place of "src/server/lib/config/index.js". I tried "config": "./src/server/lib/config/index.js" but that didn't work.

[Nhan DT]

This should be the best answer. Thank you very much.

[Mac]

Awesome! Unfortunately, I also have to manually configure ESLint and Rollup with duplicates of the aliases. At least I have a clean environment, but I wish JetBrains would support Rollup natively like they do Webpack.

[lyh543]

@Hitmands see stackoverflow.com/a/59369029/12208030

[patricknelson]

Thank you for posting this! This also works for the special $lib/* references in SvelteKit. A copy/paste answer for that can be found here: stackoverflow.com/questions/71552572/…

[D.R.]

Love your perfectionism. I'd do it identically (no joke).