flâneur

How to quickly sort imports with Prettier - DEV Community

dev.to · 415 words · saved by 1 readers

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. First, let’s install the necessary dependencies. We’ll need just two: prettier and the plugin 📦. 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: 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: Let’s break down these options. They’re parsed through regex (yes I kn

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 Enter fullscreen mode…

saved by

related reading