Tired Of Relative Imports? Time To Get Rid Of Them!
Tags: javascript, typescript, tutorial, webdev
Published: 2021-05-14 15:50:17

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

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

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

![https://media.giphy.com/media/3o8doVY3jacRLyrSmI/giphy.gif](https://media.giphy.com/media/3o8doVY3jacRLyrSmI/giphy.gif)

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:

```json
{
	"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](https://code.visualstudio.com/docs/languages/jsconfig#_what-is-jsconfigjson) 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:

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

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

```jsx
// 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
```

```jsx

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

![https://media.giphy.com/media/oYtVHSxngR3lC/giphy.gif](https://media.giphy.com/media/oYtVHSxngR3lC/giphy.gif)

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

```json
{
	"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:

```jsx
// 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:

```jsx
import 'assets/styles/index.css'
```

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

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

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

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

![https://media.giphy.com/media/3o7TKTDn976rzVgky4/giphy.gif](https://media.giphy.com/media/3o7TKTDn976rzVgky4/giphy.gif)

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](https://code.visualstudio.com/docs/languages/jsconfig) 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. 😎

![https://media.giphy.com/media/3o6Zt6KHxJTbXCnSvu/giphy.gif](https://media.giphy.com/media/3o6Zt6KHxJTbXCnSvu/giphy.gif)