Let's assume you have a folder structure like this in your project:
This is how your imports will typically look:
And it's gonna be even worse if you are importing in a file that is nested deeply.
To solve this, you can add a jsconfig.json (or tsconfig.json if you have a TypeScript project) and then add the following to it.
This configuration will now essentially allow you to import folders like @/components, @/utils or @/hooks etc from anywhere in the codebase.
Now your imports will look like this: