Mind blowing VS Code trick 🤫

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

We use to import files in the below way,

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,

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,

{
  "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 :)