Hey guys! I recently found a nice shortcut that makes the javascript developers' life easier! 
We use to import files in the below way,
<pre><code class="lang-js">import cart_styles from "../../styles/cart.css";
import product_styles from "../../styles/product.css";
import user_styles from "../../styles/product.css";
</code></pre>
This starts looking ugly and redundant if there are multiple imports from a parent folder that's above in the hierarchy.
Luckily, there's a neat shortcut in VS Code that solves this issue.
With the help of this trick, we can import files in the following way,
<pre><code class="lang-js">import cart_styles from "@styles/cart.css";
import product_styles from "@styles/product.css";
import user_styles from "@styles/product.css";
</code></pre>
I think this is a game-changer for me. So here's how to do this.
<h2 id="step-1">Step 1</h2>
Create a <code>jsconfig.json</code> file in the root directory
<h2 id="step-2">Step 2</h2>
Add the below code,
<pre><code class="lang-js">{
 "compilerOptions": {
 "baseUrl": "./",
 "paths": {
 "@styles/*": ["styles/*"]
 }
 }
}
</code></pre>
Feel free to add new folders If you have any.
That's it. From now you can simply use <code>@styles/</code> instead of <code>../../</code>
<blockquote>
What do you think about this trick? let me know in the comments :)
</blockquote>

Hey guys! I recently found a nice shortcut that makes the javascript developers' life easier! 

We use to import files in the below way,

```js
import cart_styles from "../../styles/cart.css";
import product_styles from "../../styles/product.css";
import user_styles from "../../styles/product.css";
```

This starts looking ugly and redundant if there are multiple imports from a parent folder that's above in the hierarchy.

Luckily, there's a neat shortcut in VS Code that solves this issue.

With the help of this trick, we can import files in the following way,

```js
import cart_styles from "@styles/cart.css";
import product_styles from "@styles/product.css";
import user_styles from "@styles/product.css";
```
I think this is a game-changer for me. So here's how to do this.

## Step 1

Create a `jsconfig.json` file in the root directory

## Step 2

Add the below code,

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

Feel free to add new folders If you have any.

That's it. From now you can simply use `@styles/` instead of `../../`

> What do you think about this trick? let me know in the comments :)

Life-saving path import trick in VS Code ⚡

Step 1

Step 2