@/ imports - consider alternatives?

Thank you for this amazing source of practices, I’ve been sharing it with lot of people!

@/ imports confuses me, could you please add alternatives to the doc? I’m not sure if and why this is a best way.

Another option is to set baseUrl: 'src' to tsconfig and now instead of ‘@/components/X’ we import from ‘components/X’. I don’t think there are meaningful and maintained ‘components’, ‘hooks’, ‘lib’, ‘assets’ packages on npm.

Another option is to use relative paths, editors are smart nowadays, they write imports automatically, they update imports automatically when moving files. At least VSCode and JetBrains editors a capable. Most of people are using VSCode, so this shouldn’t be a problem.

[alan2207]

It works well with VSCode, you should definitely give it a shot.

And if you have the import/order enabled in eslint you will get a nice visual separation of local vs dependency modules which you do not get with the suggested approach.

(ignore the squiggly line in the left image for now), VSCode did linting auto fix on save automatically and reordered the imports.

[alan2207]

Hi there,

Both of your suggestions are valid. I wrote a bit here about the reason why I am choosing this way:

“It is also possible to define multiple paths for various folders(such as @components, @hooks, etc.), but using @/* works very well because it is short enough so there is no need to configure multiple paths and it differs from other dependency modules so there is no confusion in what comes from node_modules and what is our source folder. That means that anything in the src folder can be accessed via @, e.g some file that lives in src/components/MyComponent can be accessed using @/components/MyComponents.”

In a nutshell, I find it useful to have a symbol in front of it because it will prevent conflicts from node_modules imports in case a folder in src has the same name as some dependency - happens not very often, but it’s nice to be sure and not to think about it ever again. In the end, it’s just a matter of preference 😃