@/ imports - consider alternatives? about bulletproof-react HOT 5 CLOSED

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.

from bulletproof-react.

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

from bulletproof-react.

it's just the same with a different symbol, while I was suggesting to mention that baseUrl exists and seems to be a valid option, and either relative imports is not a big deal with modern editors

from bulletproof-react.

Chance there is an overlap with npm module is very close to zero, so it will never happen in of 99.99% cases, if happen it can be workarounded by aliasing module, and import { X } from 'components/X' is more pleasant import to read, so I think it worth to mention this in same document. All other suggestions are very good to be picked by default, and @/ stands out here in my opinion as imperfect default

so there is no confusion in what comes from node_modules and what is our source folder.

yes, it mentioned that it's possible to do in a "confusing" way, but many people reading this don't know it's even possible and how to setup it in this way, so they cannot prefer one way over another and decide if "components/X" is confusing or not on they own

from bulletproof-react.

I understand why better to have zero chance than close to zero, and if you're sure @/ is a better practice let's close this issue

I never tried @/ myself so unsure if it's easy to configure popular editors VSCode and JetBrains to use it in autocompletion, assuming it's easy, since no info about it in the doc

from bulletproof-react.