Logo
Cover image

Tired Of Relative Imports? Time To Get Rid Of Them!

Posted on 5/14/2021

javascripttypescriptwebdev

At some point in your JavaScript developer journey, you've certainly encountered these awful relative imports:

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

And you were probably bothered by the ugliness of them.

Disgusting GIF

But guess what? I'm here as a savior to show you how to get rid of them.

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.

You can then complete it with the following keys:

1{
2	"compilerOptions": {
3		"baseUrl": "."
4	}
5}

The most studious ones of you might think:

Compiler options? But JavaScript is not a compiled language.ย ๐Ÿคจ

And you're totally 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:

1.
2โ”œโ”€โ”€ components
3โ”‚   โ””โ”€โ”€ layouts
4โ”‚       โ””โ”€โ”€ header.js
5โ”œโ”€โ”€ styles
6โ”‚   โ””โ”€โ”€ header.css
7โ””โ”€โ”€ jsconfig.json

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

1import 'styles/header.css'

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

1import '../../styles/header.css'

From 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 be able to import them relatively from the current directory you are in.

1.
2โ”œโ”€โ”€ src
3โ”‚   โ”œโ”€โ”€ vehicles
4โ”‚   โ”‚   โ””โ”€โ”€ car.js
5โ”‚   โ”‚   โ””โ”€โ”€ truck.js
6โ”‚   โ””โ”€โ”€ index.js
7โ””โ”€โ”€ jsconfig.json
1// index.js
2import truck from './vehicles/truck.js'

Shocked GIF

However, it might not be a good idea to stop there: how would you differentiate your project imports from your dependencies?

Paths

In our jsconfig.json file, we 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.

1{
2	"compilerOptions": {
3		"baseUrl": ".",
4		"paths": {
5			"css/*": ["styles/*"]
6		}
7	}
8}

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

1// header.js
2import 'css/header.css'

I wouldn't recommend doing this at all, as this would create inconsistencies between the real folders names and the aliases. Instead, you could simply rename the actual folder.

Nevertheless, this option can be useful to differentiate your project imports and your dependencies. Let's consider the following folder structure.

1.
2|โ”€โ”€ src
3|   โ”œโ”€โ”€ styles
4โ”‚   โ”‚   โ””โ”€โ”€ index.css
5โ”‚   โ””โ”€โ”€ index.js
6โ””โ”€โ”€ jsconfig.json

A common path mapping convention is to use the @ prefix for your project imports.

1{
2	"compilerOptions": {
3		"baseUrl": ".",
4		"paths": {
5			"@/*": ["src/*"]
6		}
7	}
8}

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

1import '@/styles/index.css'

Also, if you have another folder outside the src one, you could add another mapping.

1.
2|โ”€โ”€ assets
3|   โ””โ”€โ”€ styles
4โ”‚       โ””โ”€โ”€ index.css
5|โ”€โ”€ src
6โ”‚   โ””โ”€โ”€ index.js
7โ””โ”€โ”€ jsconfig.json
1{
2  "compilerOptions": {
3    "baseUrl": ".",
4    "paths": {
5      "@/*": ["src/*"],
6      "@assets/*": ["assets/*"]
7    }
8  }
9}

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...?

Smart GIF

Exactly: inside the tsconfig.json file. Smart, isn't it?

Wrapping Up

Congratulations! You've now got rid of those awful imports.ย ๐ŸŽ‰

To go further, I would recommend you following this link from the official Visual Studio Code website to learn more about the jsconfig file.

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

Thank you GIF

Copyright ยฉ 2022 Ludovic CHOMBEAU