Import Order/Grouping Best Practices?

Hey all,

doing a bit of refactoring and moving more and more functionality to modules. Which is awesome! But where there used to be maybe 3-5 import statements I’m now looking at 10-15+ in some cases. Collections, methods, components, app-wide events, etc.

Just wondering if anyone had a way of structuring those imports (maybe with comments) that allows for the fastest grokking of functionality? Tagging @awatson1978, as this seems like the type of thing you may have already figured out =)

Not really a structuring help, but eslinting with no-unused-vars helps flag all unnecessary imports. If you set your editor to lint on the fly, it becomes really easy to weed out the unneeded imports.

1 Like

+1 for ESLint. It’s great all around, not just for making sure you’ve removed unnecessary imports but, for all around consistent code structure.

Hi @vigorwebsolutions,

Most of the time I just keep things in vaguely chronological order, and stick with a decorator pattern. The imports at the top of the list are the most baked and consist of infrastructure stuff, and the imports at the bottom of the list are the things I’m currently working on (i.e. experimental, subject to change, etc).

As for relative paths vs absolute paths, I’m a big fan of absolute paths. Relative paths seem like a good idea in theory, because a person can drag-and-drop folders. But in practice, it’s super difficult to trace the relative paths around. Whereas it’s always possible to run a search-and-replace on an absolute path. My experience was that my file and directory structure was pretty much frozen while using relative paths; but once I migrated everything over to absolute paths, I was able to refactor filenames and directories without too much difficulty.