I Wrote a VS Code Extension to Type Your Flutter Challenge’s Imports | by Aziz Nal | Might, 2022


Simply kind your dart imports

Photograph by Brett Jordan on Unsplash

The Dart Import Sorter extension does one important factor: It converts your imports from a multitude to one thing neat and constant.

For essentially the most half, IDEs maintain organizing your imports for you. I’m not an avid IntelliJ person however I usually appreciated the best way it simply retains imports out of sight and out of thoughts.

I needed the identical performance in VS Code however I couldn’t discover any extension available in the market to realize the conduct that I needed. So, like all overly-ambitious programmer, I made a decision to write down my very own!

The Dart Import Sorter extension does one important factor: It converts your imports from a multitude to one thing neat and constant.

Sorting and grouping a bunch of messy imports
Sorting and grouping messy imports

You’ll be able to both go together with the default config or you possibly can customise it to fit your wants. The extension may be configured utilizing common expressions, so sky’s the restrict.

Right here’s an instance configuration:

Instance extension configuration (settings.json)

In keeping with the instance above, the extension will search for imports matching the Flutter rule, then Dart, then All the pieces Else. These labels aren’t truly used within the sorting course of. They’re simply right here that will help you preserve observe of what every rule does.

Right here’s a demo of those guidelines. The next is a bunch of messy imports:

Instance of unsorted imports

The above code turns into like the next after being sorted:

Instance of grouped and sorted imports

You’ll discover new strains between every group and that imports inside teams are sorted alphabetically.

You’ll be able to flip off having new strains between teams by setting the next rule:

"dartimportsorter.leaveEmptyLinesBetweenGroups": false

You’ll be able to run the extension utilizing the shortcut Ctrl + Alt + O, or you need to use the command palette Ctrl + Shift + P -> Dart: Type Imports .

Lastly, you possibly can set the extension to kind your imports if you save your file. To do this, set the next rule:

"dartimportsorter.sortOnSave": true

Once I first began scripting this extension, it was often because I simply favored seeing my imports grouped and arranged. However then, I discovered a few (type of) compelling causes:

  1. Your imports are extra compact originally of your file. You already know which half to skip instantly to get to the precise code. You too can collapse the entire block to make it simpler.
  2. You’ll be able to determine and repair incorrect imports faster if such a necessity arises.

Word: This half doesn’t actually discuss in regards to the performance of the extension, however slightly the event course of.

I’ve used the method of creating this extension as a little bit of a playground to strive just a few programming/structure strategies that I’ve been studying about. Primarily Clear Structure (by uncle bob). I haven’t actually utilized it right here however it’s impressed me to use the SOLID rules (or a minimum of give it an excellent strive).

I managed to implement inversion of management by injecting dependencies utilizing TSyringe. This allowed me to decouple issues from one another and correctly do unit assessments with out involving the vs code extension API.

I’m not essentially the most skilled particular person in terms of writing assessments however I’ve to confess, having assessments significantly elevated my confidence within the adjustments that I’ve carried out in my code, whether or not it’s including options or refactoring. All I must do to verify all’s effectively is simply to write down just a little command in bash and if it lights up inexperienced then I’m good to go.

When you’re concerned with contributing otherwise you’d wish to ask for a function, right here’s the hyperlink to the repo

Additionally, right here’s a hyperlink to the extension in VS Code market

Completely happy Coding!



Leave a Comment