Diego (Relatable Code)

Posted on Mar 30, 2022 • Originally published at relatablecode.com on Mar 30, 2022

How to quickly sort imports with Prettier

#programming #tutorial #javascript #beginners

Introduction

Having disorganized imports bothers me deeply when working on a project. I typically like to keep the entire codebase as organized as possible as it makes sifting through the files much easier. With the help of prettier and a plugin, we can easily sort imports!

As a side note if you’re using ESLint I have another article to sort imports using that.

Sort Imports: Setting everything up

First, let’s install the necessary dependencies. We’ll need just two: prettier and the plugin 📦.



npm install prettier @trivago/prettier-plugin-sort-imports --save-dev

Sort Imports: Configuring the Rules

Now we can go ahead and start configuring our rules. This plugin receives an array of strings. It uses these strings to decide the order of our imports!

So for example in my small sample project I have the following files:

So we’ll have to set up the rules to configure them. I typically like the following order:

Package/third-party imports
Project imports
Relative imports

This will cover mostly everything! So let’s create a .prettierrc (a prettier configuration file) at the route of our project.

Inside that file add the following rule:



{ 
    "importOrder": ["^components/(.*)$", "^[./]" ],
    "importOrderSeparation": true, 
    "importOrderSortSpecifiers": true 
}

Let’s break down these options. They’re parsed through regex (yes I know the devil’s tongue). But it’s roughly the same format for every import type.

First, any type of regex that isn’t included will be sent to the top. This is crucial. As the unincluded third-party dependencies will just go to the top as we want. Afterward, we follow up without aliased components folder, and then our relative imports. I also have two additional rules to add linebreaks between the import groups and to sort specifiers in an import declaration

In this GitHub repo, you can find a list of the other rules that are available.

Sort Imports: The Result

Now as soon as we save the file (if you happen to have format on saving in whichever IDE you’re using) or format the file you’ll see the following result:

Wow, that look’s much cleaner 👌🏼

Conclusion

Hopefully, with that, you have more organized imports in your projects! If you have any other tidbits on how to clean up code leave them in the comments below!

Top comments (5)

Ryan Walker • Jan 2

Side note- I had to add this to my .prettierrc

"plugins": ["@trivago/prettier-plugin-sort-imports"]

Sergey Lubimov • Mar 19

Thanks,
Without this line it doesn't work.
Diego, add the line to article`s text.

Azat S. • Jun 9 '23

Also you can use eslint-plugin-perfectionist with "Fix on save" option in your editor. It supports sorting not only alphabetically, but also by line length. And not only imports.

github.com/azat-io/eslint-plugin-p...

Ian VanSchooten • Dec 8 '22

Note that if you use this plugin, side-effect imports will also be sorted, which is not safe to do can result in a different behavior. I maintain a fork of the project which does not sort side-effects, if that's something that is important to you.

github.com/IanVS/prettier-plugin-s...