Is there "one and only way" to configure WebStorm imports behaviour?

JS ecosystem is absurdly fragmented nowadays. We have Webpack, Parcel, Esbuild, Rollup, Vite, etc., all of them have custom plugins, own configuration,  etc.

One thing that bothers me almost everyday is how IDE should handle auto-completion and imports, given all these tools may have custom way to set it up.

For example, currently I use Vite and I configured path aliases so @ refers to src root. WebStorm doesn't support Vite (and let's be realistic here, it's not possible to support all existing tools) but it supports Webpack so I went ahead and created dummy webpack.config.js:

const path = require("path");

module.exports = {
resolve: {
alias: {
"@": path.resolve(__dirname, "src"),

Now there is a thing. I also use SASS and Vite allows to use aliases "as-is" in SASS files.
Webpack requires tilde ~ for it, Vite doesn't. Now WebStorm can't recognize my imports:

My question is, wouldn't it be better to have a Jetbrains-specific config file for explicitly tuning that path resolving behavior of WebStorm?
Something like intellij.config.js where I could specify all path resolution schemes for all file types and all the other stuff IDE assumes when it sees webpack configs.

Currently it just does that under the hood but you see that it's not exactly the most flexible way to do it.

And yes, I'm aware of The point is that maybe path resolution configuration should be exposed to the end user in case he works with something that IDE doesn't "support".

Comment actions Permalink

The issue is tracked at, please follow it for updates

Comment actions Permalink

Is it hidden? I get 404 while trying to open it.


Comment actions Permalink

I've changed its visibility, can you see it now?

Comment actions Permalink

Yes, I can see it now. Thank you for assistance.


Please sign in to leave a comment.