Feed your internal perfectionist by having perfect import hygiene.
The Problem
Nowadays, we work with javascript
or typescript
modules, and we almost always end up having quite a few imports in each file.
Sometimes, it ends up being quite difficult combing and understanding which import brings what in. To make it even worse, it adds to the unnecessary noise that each PR is already struggling with.
Good to know before jumping in
Most IDEs worth their salt know how to at least remove imports that are not used in the file, I highly recommend using that option since it helps stay clean. TsLint(R.I.P πͺ¦) and EsLint have rules that you can enable to make sure nothing gets merged that imports modules without using them. Make sure you serve the minimum amount of code necessary.
Solution
There are three parts to the solution:
- Setup Prettier
- Setup Prettier Import Order Plugin
- Do work
Part 1 - Setup Prettier
Right now, our imports look something like this:
Nothing wrong with this, but we can do better. We can enable our IDE to at least order imports automatically. After we do that, they look just a tad better.
Now that the settings are correct, let's install Prettier: npm install --save-dev prettier
.
We want to use save-dev
because we only need it for development.
Now, for what it's worth, this is my usual .prettierrc.js
file.
This is where developers spend eons arguing what's best. I don't care that much as long as it's consistent across the whole team.
Part 2 - Setup Prettier plugins
Now, this is where the magic π§ββοΈ comes in. Thanks to people at Trivago, we have this plugin available to us: prettier-plugin-sort-imports.
Just install it with npm install --save-dev @trivago/prettier-plugin-sort-imports
;
You can find more options in the documentation, but this is my goto:
You'll notice that I added 3 more options for import
, importOrderSeparation
and importOrderParserPlugins
. This is tailored for an Angular project, but you can easily tailor it to anything.
Now, assuming you have the prettify-my-code-on-save option enabled in your IDE, if you do a quick Cmd + S
, your imports should look like this:
To me, this is so much Prettier(pun intended π₯). Imports are grouped into categories defined by me, and they get a nice empty line in between categories. Sweet!
Part 3 - Do Work
Again, this is highly subjective. Please customise it however you want. In the end, it's just a tool. π
Want more?
If you want to know more about this, or something doesn't make any sense, please let me know.
Also, if you have questions, you know where to find me⦠On the internet!
Be kind to each other! π§‘
Over and out
New blog post βοΈ => Organise imports with Prettier and friends https://catalincodes.com/posts/organise-imports-with-prettier-and-friends #Prettier #Typescript