5 must-have VScode extensions for a Flutter developer 
Tags: flutter, dart, vscode
Published: 2020-08-26 13:47:46

Back when VScode was introduced in 2015, everyone thought that it's just another editor, but Microsoft was very serious about it. They released monthly and some times weekly updates to their product, and that increased the popularity of the editor among the developers. Even now, the editor constantly receives updates (just 15 mins before writing this post) which makes this editor unique and everyone's favorite. Now, when we talk about VScode, we cannot deny the fact that it has some awesome extensions which can be very helpful for the developers. From theme extensions to code organizer, there are tons of extensions available on the VScode marketplace. So, if you're a flutter developer, here are 5 extensions you must have!

I'm considering you have installed Flutter and Dart extensions. So, they won't be considered in this list.

####So here's the list! <br />
![List](https://media.giphy.com/media/F0QWePzwQRewM/giphy.gif
)
###**1. Awesome Flutter Snippets**

This is an extension that is a collection of commonly used flutter classes and methods. This extension will help you increase the speed of the development as you can use shortcuts to create commonly used widgets. Widgets such as StreamBuilder and SingleChildScrollView can be created by typing the shortcut streamBldr and singleChildSV respectively. It's that easy.

 


###**2. Bracket Pair Colorizer 2**

Flutter has brackets, a lot! Every Flutter developer knows how important brackets are and it can be cumbersome to manage all those brackets (especially if you are lazy like me ). Bracket Pair Colorizer 2 solves your problem! This extension allows matching brackets to be identified with colors, which means you can easily understand which bracket is closing where. It also makes your code looks beautiful. You can see how it works in the below image.

![Bracket Pair Colorizer](https://dev-to-uploads.s3.amazonaws.com/i/hk56updu4gnhctvorwg0.PNG)
 
###**3. Error Lens**

One of the most helpful extensions! It highlights the line containing diagnostics and prints the error inline and it can be used with any language!

Here are some features of this extension:
•Highlight lines containing diagnostics
•Append diagnostic as text to the end of the line
•Show icons in the gutter
•Show message in the status bar

![Error Lens](https://dev-to-uploads.s3.amazonaws.com/i/ghw48nv00wgc1e3rvz52.PNG)

###**4. Pubspec Assist**

Adding a dependency to the pubspec.yaml file can be boring and tiring. You always have to visit pub.dev and search for the dependency and then adding it to your pubspec.yaml file manually. So tiring, isn't it? Well, what if I told you that all this is possible inside vscode? Pubspec assist is the extension that solves this problem. It directly searches the dependencies directly from vscode and adds it to the pubspec.yaml file. 

![Pubspec assist](https://dev-to-uploads.s3.amazonaws.com/i/83z9wqrw4i10gznzj5q7.gif)

###**5. Bloc**

BLoC (Business Logic Component) is a reactive state management pattern. An extension available on pub.dev can be very helpful while writing codes. Still, there are lots of boilerplate code that you have to write. This extension helps you avoid those boilerplate codes.

![Bloc](https://dev-to-uploads.s3.amazonaws.com/i/13zcqywzrwvs2uqvkpka.gif)

Wanna share some cool extensions that I missed? Put it in the comment section, it will be helpful for everyone!
<br />

##Wanna help me out? :
<br />

<a href="https://www.buymeacoffee.com/rijinthomas" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-violet.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>

<br />

###Connect with me:
Twitter: https://twitter.com/real_rijin
LinkedIn: https://www.linkedin.com/in/rijin-thomas/
Github: https://github.com/rijin-23