Some good tips you recommemded IMO. Regarding imports and how to group/list them i follow another method.
I group them by what they are, or what they do.
Example if its an external package, lets say, something from react-router-dom i put it on top.
If its a layout component which is universal for then whole app, i put it on top of the other imports.
Then i put universal components. Example components outside of an switch, navbar, footer, etc.
Then i put the pages imports.
Then i put the utils or helper methods.
I understand what you mean with when havint 20 or more imports its easier to find what is imported and where, etc but grouping them logically to me personally works better.
At least i got used to this method and thats how i do it om my projects.
Will follow you since i had love to see the comments on the rest of the project.
The important thing is consistency. Pretty much everything is decided by convention and business priorities but consistency is key if you don't want to slow people down.
Funny, I do the exact same.
NPM package imports on top
Project module imports
Current module imports
And then group each by interfaces, components, services etc
I do the same thing! I’m glad I’m not alone.
Hey Arber! Thanks for your reply.
If that works for you, then by all means go ahead with it! I'm not condemning any strategy nor believing that mine is superior in any way. If you have a formatting standard that you can consistently follow, then I'm all for it. 🙂
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.