VueJs type-hint imports support

In applications bigger than a side / fun project, structuring your project right can be a life-saver in the long run, for both old-developers knowing the project's ins & outs and for new ones trying to get on-board.

But structuring your project right and using all kinds of different imports / syntax is confusing for your IDE. We had this problem with PhpStorm - but it exists on all JetBrains products, as their core is more or less the same. Other "lighter" IDEs have the same problem, but JetBrains and VS code support improves with the below fix, so I guess this would work on many more that respects the "specs".

Consider a nice, modern SPA written in VueJS, a library I like quite a lot, despite its caveats ( looking at you, array and object changes ).
We are also using VueRouter and VueX, hence we need some components for pages, some components for the actual rendering in the pages,
some mixins for shared variables / functionality, some modules for the Vuex Store, etc. Things are starting to get messy.

Now, when importing a component all over the place, we want the IDE to be able to type-hint its location, no matter how we structure our application. By default, PhpStorm / WebStorm supports imports that look like this :

import MyComp from "../../components/shopping-cart/myComp.vue";

This works fine, but only if you know where you are right now ( directory of the file you are trying to modify ).
My guess is you just smiled right now: you never do, you just rely on your cool shortcuts and chosen IDE to jump around files and folders in your project.

So what if we could do something like this ?

import MyComp from "COMPONENTS_ROOT/shopping-cart/myComp.vue";

Not only you can define your aliases for folders if you are using Webpack, but also you get the IDE's help jumping around folders and type-hint when writing the import manually.

So how can we achieve this? Quite simple actually :

config = {
    ............
    resolve: {
        alias: {
            "COMPONENTS_ROOT": path.resolve(__dirname, "/components"),
            "MIXINS_ROOT": path.resolve(__dirname, "/mixins"),
        },
    };

The only problem is… it does not work.

I tested on PhpStorm and VS code. These IDEs simply ignore the alias field from the webpack.config.js.

So... what can we do? Looking in the webpack docs, I found that according to some specification ( the classic hidden docs of something you did not know exists type-of-thing ), if we want the IDEs to actually take into account what we wrote in the alias, we must also define an array of aliasFields, like this

    aliasFields: [ "COMPONENTS_ROOT", "MIXINS_ROOT" ]

The aliasFields array lets the IDE know that it should parse the aliases declared and take them into account when parsing and type-hinting your files.
In my opinion, this is useless and uncalled for, I can not find a reason we would not want all of our aliases parsed. I'm curious if anyone knows the mindset behind this and why is this a thing.

For laravel-mix users: the laravel.mix.config.js file is different in structure and it is not supported atm.
Solution? Create a dumb new file containing only the alias and aliasFields and set it as webpack root config file.
The setback here is that you will have to update both files when adding / removing an alias.

TL;DR the required config ( by IDE ) must have both alias and aliasFields in the resolve key :

config = {
    ............
    resolve: {
        alias: {
            "COMPONENTS_ROOT": path.resolve(__dirname, "/components"),
            "MIXINS_ROOT": path.resolve(__dirname, "/mixins"),
        },
        aliasFields: [ "COMPONENTS_ROOT", "MIXINS_ROOT" ]
    };

Would be glad to hear what other tools you guys use for large VueJs projects!

Cheers : )