At some point in your Javascript developer journey, you've certainly encountered these types of imports:

import Car from '../../../vehicles/car'
import House from '../../../buildings/house'

And you were probably bothered by the ugliness of them...

But guess what? I'm here as a savior to show you how to get rid of them! (really) 😎

Ready? Let's go! 🏁

baseUrl

The simplest way to get rid of these awful imports is by simply editing your jsconfig.json file. If you don't already have one, you can just create it at the root of your project.

Let's complete it with the following keys:

{
    "compilerOptions": {
        "baseUrl": "."
    }
}

Now, the most studious ones of you might think: "Compiler options? But JavaScript is not a compiled language!". And you're right! If you want to know why does this key exist, I recommend you to follow this link from the official website of Visual Studio Code.

Now, imagine having the following directory structure:

.
├── components
│   └── layouts
│       └── header.js
├── styles
│   └── header.css
└── jsconfig.json

If you want to include your header.css style file in your header.js file, you can now do it this way:

// header.js
import 'styles/header.css'

Without this configuration, here's how you would have done it:

// header.js
import '../../styles/header.css'

Now, no matter how deep you are in your project's architecture, you'll be able to import your files as if you were at the root of your project. 😲

And obviously, you'll still able to import them relatively from the current directory you are in!

.
├── src
│   ├── vehicles
│   │   └── car.js
│   │   └── truck.js
│   └── index.js
└── jsconfig.json

// index.js
import truck from './vehicles/truck.js'

Paths

Back to our jsconfig.json. You can also add the paths key in order to map an import to a specific folder. This is useful for giving aliases to some folders in your imports.

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "css/*": ["styles/*"]
        }
    }
}

Considering the same folder structure we've seen in the previous part, you could now import your styles like this:

// header.js
import 'css/header.css'

But I wouldn't recommend doing this at all, as this would create inconsistencies between the real folders' names and the aliases — instead, why not simply renaming the actual folder? 🤨

Nevertheless, this option can be useful for folders you often use and that are not at the root of your project. Let's consider the following structure:

.
├── assets
│   ├── styles
│   │   └── index.css
|── src
│   └── index.js
└── jsconfig.json

We will often use the styles directory to import our styles, and that could be very handy if we could remove the assets prefix, in order to not have to always write this:

import 'assets/styles/index.css'

In that case, you could add the following to your jsconfig.json:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@styles/*": ["assets/styles/*"]
        }
    }
}

After that, here's how you would import your styles:

import '@styles/index.css'

The @ is a conventional way to reference a folder-mapping import, in order to differentiate it from a classic import.

TypeScript

Oh, you are using TypeScript? Awesome! Of course you can also use this trick: the only difference is that you won't write those settings inside the jsconfig.json file, but instead, inside...?

Exactly! Inside the tsconfig.json file. Smart, isn't it? 😏

Conclusion

That's it! You've now got rid of those awful imports, congratulations! 🎉

To go further, I would recommend you following this link from the official Visual Studio Code website, in particular to exclude some directories that are not part of the source code.

With that being said, I thank you for reading me all the way through, and I hope you've learned something with this article. 😎