1. Awesome Flutter Snippets By Neevash Ramdial (Nash)
Awesome Flutter Snippets is a collection of commonly used Flutter classes and methods. It increases your speed of development by eliminating most of the boilerplate code associated with creating a widget. Widgets such as StreamBuilder and SingleChildScrollView can be created by typing the shortcut streamBldr and singleChildSV respectively.
Features
- Speeds up development
- Eliminates boilerplate
- Supports complex widgets (Eg: Custom Clipper and Custom Paint)
2. Flutter Snippets By Maruf Hassan
Supercharge your Flutter workflow with handy Snippets for VS Code. This extension already have 90,800+ installs. This extension is similar to 1st one with more snippets.
Have a try, I hope you will like this.
3. Better Comments By Aaron Bond
The Better Comments extension will help you create more human-friendly comments in your code.
I love the most thing in it is having different colors for different comments which is more easy to identify the comments type.
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
4. Clipboard History By Anjali
Keep a history of your copied and cut items and re-paste if needed.
Features
- Save history of all copied and cut items
- Paste from history
- Clear all history
- Remove selected item from history
- Edit selected item in history
Below demo shows the clear visibility of clipboard history.
Saving to & Pasting from Clipboard History
Erasing from Clipboard History
Editing from Clipboard History
5. Error Lens By Alexander
ErrorLens turbo-charges language diagnostic features by making diagnostics stand out more prominently, highlighting the entire line wherever a diagnostic is generated by the language and also prints the message inline.
Features
- Highlight lines containing diagnostics
- Append diagnostic as text to the end of the line
- Show icons in gutter
- Show message in status bar
6. Git Graph By mhutchie
View a Git Graph of your repository, and easily perform Git actions from the graph. Configurable to look the way you want!
7. GitLens — Git supercharged By GitKraken
GitLens supercharges your Git experience in VS Code. Maintaining focus is critical, extra time spent context switching or missing context disrupts your flow. GitLens is the ultimate tool for making Git work for you, designed to improve focus, productivity, and collaboration with a powerful set of tools to help you and your team better understand, write, and review code.
Well, with all maximum features, it is limited with some features on Free Account. To get all features, you have to upgrade to Pro Plan Account.
Discover Powerful Features
Quickly glimpse into when, why, and by whom a line or code block was changed. Zero-in on the most important changes and effortlessly navigate through history to gain further insights as to how a file or individual line’s code evolved. Visualize code authorship at a glance via Git blame annotations and Git CodeLens. Seamlessly explore Git repositories with the visually-rich Commit Graph. Gain valuable insights via GitLens Inspect, and much more.
- Blame, CodeLens, and Hovers — Gain a deeper understanding of how code changed and by whom through in-editor code annotations and rich hovers.
- File Annotations — Toggle on-demand whole file annotations to see authorship, recent changes, and a heatmap.
- Revision Navigation — Explore the history of a file to see how the code evolved over time.
- Side Bar Views — Powerful views into Git that don’t come in the box.
- Commit Graph ✨ — Visualize your repository and keep track of all work in progress.
- GitKraken Workspaces ☁️ and Focus ✨ — Easily group and manage multiple repositories and bring pull requests and issues into a unified view.
- Visual File History ✨ — Identify the most impactful changes to a file and by whom.
- Worktrees ✨ — Simultaneously work on different branches of a repository.
- Interactive Rebase Editor — Visualize and configure interactive rebase operations with a user-friendly editor.
- Comprehensive Commands — A rich set of commands to help you do everything you need.
- Integrations — Simplify your workflow and quickly gain insights via integration with your Git hosting services.
8. Image Preview By Kiss Tamás
Shows image preview in the gutter and on hover.
Whenever the path of images or icons is placed on editor, the preview is shown on left side of Gutter on VS Code.
9. Version Lens By pflannery
This extension shows version information when opening a package or project. You can directly upgrade old packages to latest one.
10. Local History By xyz
A visual source code plugin for maintaining local history of files.
Every time you modify a file, a copy of the old contents is kept in the local history. At any time, you can compare a file with any older version from the history.
It can help you out when you change, restore or delete a file by accident. The history can also help you out when your workspace has a catastrophic problem. Each file revision is stored in a separate file inside the .history folder of your workspace directory (you can also configure another location, see local-history.path). e.g., .history/foo/bar/myFile_20151212205930.ts
You can easily navigate between history files with the local-history tree in the explorer pane.
When you click on a file, a comparison with the current version is displayed.
You can also access other commands via a context menu.
11. VS Code Icons By VSCode Icons Team
This extension previews an attractive icon to folder to which the folder title is related. It helps us to identify the folder such as screens, blocs, data, widgets, android, ios, lib, windows, linux, mac, etc.
Features
vscode-icons is being shipped with a lot of features, like:
Icons Customization
Choose the icon you prefer for any particular file extension.
Bring your own icons
You don’t see the icon you like…? No worries, we got you covered. This link will show you how you can use your own custom icon!
Project Auto Detection
Are you using Angular? This feature will detect it and enable the icons for you. It also works with other frameworks.
By the way, you can use Material Icon Theme Extension as an alternative.
12. Dart Data Class Generator By hzgood
Create dart data classes easily, fast and without writing boilerplate or running code generation.
Features
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.
Quick Fix
- Create a class with properties.
- Place your cursor on the first line of the class, the constructor or a field.
- Hit CTRL + . to open the quick fix dialog.
- Choose one of the available options.
13. Json to Dart Model By hirantha
Extension convert Json to Dart Model class.
Features
- Convert from clipboard
- Convert from selection
- Convert from clipboard to code generation
- Convert from selection to code generation
- Convert from file
- Convert from directory
- Annotations
- Speed up converting
- Enhanced file names
- Context actions
- Avoid dynamic Types
- Suffix for from/to
- Codecs encode/decode
By the way, you can use Quick Type as an alternative.
14. Flutter Assets Gen By weekit
Tired of generating the assets title or variable name each time you added new images. Well, this extension helps you to generate such variable name in seconds.
Just add some settings on pubspec.yaml file and you are good to go.
Open command pallette by pressing CMD+Shift+P in MAC or CTRL+Shift+P in Windows and then search Flutter Assets: Generate.
Hit enter to generate. If you select Flutter Assets: Watch, it will generate whenever you will add the images on assets. So, choose according to use.
🔥Bonus
This is not any extension but here I’m sharing about VS Code settings though which you will get tree like structure on each property you use.
Open settings by pressing CMD+, or CTRL+,
search “dart preview ui” and check the options as below.
Restart IDE and you are done!
Conclusion:
These were the top 14 VS Code extensions for fast flutter app development. Clap this article if you like it. Or comment down which one you like the most, or which one you were using or you can even suggest me which one I’m missing, I will be glad to learn new. Thanks for reading. 🙂
