Fixing import hell in JavaScript projects with vscode paths.

This is gonna be a very short article but would be very useful to many.

It's normal for the code contained within your projects to live in different directories and while this is definitely the right thing to do, importing different modules into different files can become very nasty as shown below:

Screenshot 2021-03-22 at 09.23.47.png

What if the relative path hell we have in the screenshot above could be made cleaner like what we have below:

Screenshot 2021-03-22 at 09.25.23.png

Well, vscode paths to the rescue.

Step 1

Create a jsconfig.json file at the root of your project.

This file allows you set some global configurations for your project which includes file/directory paths mapping.

Step 2

Setup the baseUrl and paths options as shown below. The baseUrl should be whatever you consider being the root directory for your project... For most people, this is src

Screenshot 2021-03-22 at 09.35.36.png

Basically what's happening here is we are mapping directories to specific keys and letting vscode know where to find certain folders when we try to import them to be able to reference them as shown below.

Screenshot 2021-03-22 at 09.25.23.png

I hope you find this helpful... Thanks.