Stop Writing ../../../../../../ in Your Imports

Something clicked for me recently when I was staring at this line in my codebase: import Button from " ../../../../../../components/Button.tsx " Six levels deep. And honestly, what does that even tell you? You have to mentally trace backwards from wherever you currently are just to figure out where that file lives. The path is relative to this file, which means it looks different in every single file that imports the same component. There is a cleaner way. import Button from " @/components/Button.tsx " Same component. But now the path is absolute, it reads clearly, and it looks identical no matter which file you paste it into. You immediately know where to find it in the project. No counting ../ hops. Setting It Up It takes about five minutes. In your tsconfig.json : { "compilerOptions" : { "baseUrl" : "." , "paths" : { "@/*" : [ "src/*" ] } } } If you are using Vite: // vite.config.ts import { defineConfig } from " vite " import path from " path " export default defineConfig ({ resolv