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:
What if the relative path hell we have in the screenshot above could be made cleaner like what we have below:
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
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.
I hope you find this helpful... Thanks.