Recommended Visual studio code extensions for Flutter developers
In this article, we’ll be looking at awesome vscode extensions for Flutter developers.
Vscode is a free open-source text editing tool by Microsoft with support for developing applications using different programming languages. It has built-in Git functionality.
Install extensions to add new languages, themes, and debuggers, and connect to additional services. Extensions run in separate processes, ensuring they won’t slow down your editor.
It has a desktop app for Windows, Linux and macOS. Find out more about Vscode
Vscode is one of the best editors a developer should’ve.
The following are a few amongst many extensions out there to smoothen your development experience in building Flutter apps.
You are surprised there are extensions for building flutter apps on vscode right? Moreso I do build without installing android studio.
If you’re new to flutter development you can look up this link on how to build flutter apps on vscode text editor.
The first two extensions (Flutter and Dart) are most important to beginning flutter app development on vscode.
1. Flutter
Flutter VS Code extension adds support for effectively editing, refactoring, running, and reloading
Flutter mobile apps, as well as support for the Dart programming language. It’s the primary extension needed to build mobile apps on vscode.
2. Dart
The flutter extension should automatically add the dart extension. However, if it’s not installed you can add it up by installing the extension.
Dart Code extends VS Code with support for the Dart programming language and provides tools for effectively editing, refactoring, running, and reloading Flutter mobile apps, and AngularDart web apps.
An extension to provide Gradle language support for Visual Studio Code, including advanced functionalities like Syntax Highlighting, Keyword Auto-completion Proposals and Duplication Validation.
4. Todo Tree
This extension quickly searches (using ripgrep) your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the activity bar. The view can be dragged out of the activity bar into the explorer pane (or anywhere else you would prefer it to be).
Clicking a TODO within the tree will open the file and put the cursor on the line containing the TODO.
Found TODOs can also be highlighted in open files.
Easily add dependencies to your Dart / Flutter project.
Pubspec Assist is a Visual Studio Code extension that allows you to easily add dependencies to your Dart and Flutter project’s pubspec.yaml, all without leaving your editor.
Demo
7. Vscode icons
Bring icons to your Visual Studio Code
8. Error Lens Features
- Highlight lines containing diagnostics
- Append diagnostic as text to the end of the line
- Show icons in gutter
- Show message in status bar
9. Dart-import
A simple plugin for VSCode to change all Dart/Flutter imports to a relative format.
Create dart data classes easily, fast and without writing boilerplate or running code generation.
The generator can generate the constructor, copyWith, toMap, fromMap, toJson, fromJson, toString, operator == and hashCode methods for a class based on class properties or raw JSON.
Additionally, the generator has a couple of useful quick-fixes to speed up your development process. See the Additional Features Section for more.
Demo
Usage
You can generate data classes either by the quick fix dialog or by running a command. In the quick fix dialog you have the option to not only generate whole data classes but also only specific methods. The command has the advantage of being able to generate multiple classes at the same time.
11. Bloc
VSCode support for the Bloc Library and provides tools for effectively creating Blocs and Cubits for both Flutter and AngularDart apps. This extension is super cool and is useful for flutter projects with bloc state management.
For more information on its usage check here
Demo
Demo
12. Better comments
The Better Comments extension will help you create more human-friendly comments in your code. With this extension, you will be able to categorise your annotations into:
- Alerts
- Queries
- TODOs
- Highlights
- Commented out code can also be styled to make it clear the code shouldn’t be there
- Any other comment styles you’d like can be specified in the settings
Demo
Given a JSON string, this library will generate all the necessary Dart classes to parse and generate JSON in a safe way because the generator support jsonc and json. Also designed to generate Flutter-friendly model classes following the Flutter’s doc recommendation and Effective Dart: Style. Extention supports for both Serializing JSON manually and Serializing JSON using code generation libraries like Freezed and Json Serializable.
Note: when you use Freezed or Json Serializable then Json to Dart Model generates only types and everything that happens after, then Dart Build System builders take care of the rest and are responsible for generated code.
Features
- Convert from clipboard to manual model classes
- Convert from selection to manual model classes
- Convert from clipboard to code generation libraries supported model classes
- Convert from selection to code generation libraries supported model classes
14. Image preview
Shows image preview in the gutter and on hover
Flutter Riverpod snippets is a way to enhance the way you use Riverpod (reactive state management). It contains a collection of different snippets such as provider.
Flutter Provider Snippets is a collection of commonly used Flutter classes and methods used when you use provider. It increases your speed of development.
17. GetX Snippets
Extension made for you, who also uses this powerful library and doesn’t like to waste time. To that extent, you find snippets of snippets of code, or even entire classes, generated with just a few keystrokes, it’s quick and easy.
Find more demos here
18. Bracket Pair Colorizer is natively available in Vscode as of 2021 and will be deprecated soon
Thank you for reading this article.
Please kindly share with your network and feel free to use the comment section for questions, answers, and contributions.
Do you love this article?? please follow me on Hashnode alemsbaja or Twitter @alemsbaja to stay updated on more articles
Originally published at https://alemsbaja.hashnode.dev.
