VSCode is one of the most popular editors for making Flutter apps due to its great integration and extensions. These extensions and shortcuts save me a huge amount of time every day. I hope these tips will help out beginners and advanced users alike.
My Top Extensions
Flutter and Dart
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
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().
Bracket Pair Colorizer 2
You may have noticed there are a lot of parentheses in Flutter projects. Adding color to matching braces makes your code more readable and you will have an easier time fixing those pesky mismatched braces.
Material Icon Theme
The default icons within VSCode are ok, 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.
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! 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 added to your pubspec.
If 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
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.
You can enable UI guides for your parentheses in your code by opening the settings and ticking “Preview Flutter UI Guides” (try searching for “Dart Flutter UI Guides”).
- Windows: Shift+Alt +F
- Mac: Shift+Option+F
Put commas after braces and then use the shortcut to move them to the next line and format your code.
- Windows: Ctrl+.
- Mac: Cmd+.
If your code has a squiggly line or if you want to wrap a widget, you can open the Quick Fix menu and select a suggested option.
- Windows: Ctrl+Shift+P
- Mac: Cmd+Shift+P
From the Command Palette, you can create a new Flutter project, access extensions like Pubspec Assist, and more!
- Windows: Ctrl+P
- Mac: Cmd+P
You can quickly change files with this shortcut. Just press the shortcut and start typing in the file name.
- Windows: Alt+Up/Down
- Mac: Option+Up/Down
To move a line up or down, hold down Alt or Option and then press the up or down arrow key. This is useful when you want to rearrange lines. It also works on multiple lines if you highlight them first.
Add Selection to Next Find Match
- Windows: Ctrl+D
- Mac: Cmd+D
To change multiple instances of the same text, press the shortcut to highlight the next instance of that text. This creates multiple cursors that are manipulated at the same time. All actions like typing, cutting, or pasting are duplicated.
Press F2 to rename a class, function, or variable both in a file and across your project. This is super useful for refactoring.
Go to Definition
- Windows: Ctrl+Click
- Mac: Cmd+Click
To view the implementation of a class or function, hold down Ctrl or Cmd and then click the text. Alternatively, press F12. You can then see the code that you wrote or see the original Flutter implementation.
Remove Unused Imports
- Windows: Shift+Alt+O
- Mac: Shift+Option+O
If you imported files or packages and then later removed all code that referenced them, you can remove the unused imports with this shortcut.
- Windows: Ctrl+/
- Mac: Cmd+/
Last but certainly not least, you can toggle a comment for a line or selected lines with Ctrl + / or Cmd + /. You do comment your code... right?
There are many more shortcuts that can be found in the VSCode docs. For more content, check out my YouTube Channel where I have many Flutter videos and tutorials. If you found this helpful, share it with your friends!