VSCode is one of the most popular editors for making Flutter apps due to its great integration with Flutter and vast ecosystem of extensions. These extensions will save you a huge amount of time every day.
Flutter and Dart Extension
These two are no brainers if you’re working on Flutter projects. They provide a number of core features such as Flutter integration, syntax highlighting, and automatic hot reload. Here’s a quick tip: you can create stateless and stateful widgets by typing stl and stfl!
Awesome Flutter Snippets Extension
Awesome Flutter Snippets Extension
These snippets provide autocomplete for boilerplate code and commonly used classes and methods. A few of my favorite shortcuts are initS, for initState(), dis for dispose(), and listviewB for ListView.builder().
Material Icon Theme Extension
The default icons within VSCode are okay, but did you know you can change them? Material Icon Theme makes the icons in your file tree and tabs more appealing.
Some of your folders will automatically change icons based on their names so that you can identify them at a glance. For example, auth will change to a folder with a lock.
This extension is helpful for your other programming projects too. There are hundreds of custom icons that will appear based on your file extensions and directory names.
Pubspec Assist Extension
This extension has saved me so much time. Pubspec Assist allows you to add dependencies to your pubspec.yaml file from the Command Palette. No more going to pub.dev and searching for a version number!
The Dart extension has this built in now, but Pubspec Assist still works great!
All you have to do is open the command palette with Ctrl + Shift + P or Cmd + Shift + P type “pubspec”, choose if you want a normal or dev dependency, type your package name, hit enter, and the package is automatically added to your pubspec.
Bloc Extension
If flutter_bloc is your state management of choice, then the bloc extension is a must have since it can quickly generate boilerplate code.
To create a new bloc with the default bloc, event, and state files, right clicking on the folder and select the option from the menu.
You can also wrap widgets with useful bloc related widgets.
Dart Data Class Generator Extension
Dart Data Class Generator Extension
If you’re not using a code generator like freezed, typing out constructors can take a lot of time and feel very repetitive.
This extension allows you to generate code for constructors, copyWith, toMap, fromMap, toJson, and fromJson methods.
In the settings, you can choose to annotate constructor parameters automatically with required and use the Equatable package for value equality.
When creating a new class and adding instance variables, you can hit Ctrl + . or Cmd + . while your cursor is over the class or variables to get access to a new list of commands.
You can choose to generate your constructor, certain functions, or the entire data class.
Error Lens Extension
Error lens is amazing for viewing error messages inline instead of finding the error in the PROBLEMS tab.
Git Lens Extension
View git history in without leaving VSCode. Track down and blame whoever introduced that pesky bug into the codebase!
Remove Comments Extension
Whenever you create a new project, it normally has some comments explaining chunks of code. Remove all of the comments by going to the Command Palette (Ctrl/Cmd + Shift + P) and searching for “Remove All Comments”.
Github Copilot Extension
Code suggestions and autocomplete in your code editor. Let Copilot do all the heavy lifting for you.