Day 87 - Paths In Javascript Projects

Today is not will be about Operating Systems but rather about something new I learend recently which is not about OS but about programming. The reason I am writing this instead of something about OS is because of not getting enough time to write these anymore. So from now on I will be doing some little posts like these when I didn't learnt anything about the Subject that I will be learning or didn't got the time to write about it. So here we go.

So i was learning about Material-UI for one of my project and saw in the import statements that you do for MUI's component is that there is the symbol @ before every import like:

import Typography from "@material-ui/core/Typography";

I tried to search for it and found out that you can use a configuration in the JS projects which lets you use @ instead of thoese long import statement which include slashes and dots in them.

// Before
import theme from "../../styles/theme";
// After
import theme from "@styles/theme";

We can do this by creating a file called jsconfig.json in the root directory of our projects and adding a key-value pair like this.

{
  "paths": {
    "@styles": ["styles/*"],
    "@components": ["components/*"]
  }
}

Now whenever we have to import some file from styles directory we only just need to use @styles to do that insted of using dots and slashes.

zainscizainsci