The top 8 Visual Studio Code shortcuts you need to know as a Flutter developer

It is important to master the tools that you use on a daily basis. Not only does it help you produce better outcomes, but it also saves you more time that could be used for something else.

Knowing and using hotkeys and shortcuts in the long term also prevents you from getting Repetitive Strain Injury caused by typing and switching between your mouse and keyboard.

Now let’s jump right into the important shortcuts that you need to know in Visual Studio Code as a Flutter developer!

If you are not using a macOS keyboard, you can usually replace the CMD shortcut with CTRL in VS Code. However, it is better to search for the correct command in your OS through Settings > Keyboard Shortcuts

1. Go to File

CMD + P

The first one is the most used shortcut in my opinion. You will always go from one file to another when working on your project.

Most people will use their mouse, go to the file directory hierarchy and look for the file they need. A much faster way is to use the Go to File shortcut.

To use this shortcut, press hotkeys and type the file name that you need to open. Take note that this also uses a smart search approach where you can just type a part of the file name and it will show possible results.

2. Refactor

CTRL + Shift + R

The second most used shortcut for me is the Refactor shortcut. It gives you a lot of options to either improve your code or provide Flutter utility shortcuts.

Here are some of the things Refactor shortcut can do: - Wrap a widget with another widget - Wrap a widget with a builder widget - Extract a selected piece of code into its own method or variable - Extract a selected piece of code into its own widget

3. Show All Commands

CMD + Shift + P

The second shortcut that I like is the Show all commands shortcut. You can think of it as the map when you get lost trying to find a shortcut.

If you want to do something, say Go to File, or Format the Document, just type in the shortcut and enter the action you want to do.

4. Rename

F2

Rename command in Visual Studio Code is like a smart rename feature. This shortcut can save you minutes to hours by pressing this shortcut and entering the new variable or function name.

This will lessen your dependence on Find and Replace whenever you want to rename a function name or a variable.

The neat thing about this shortcut is that it renames not only the names within a file but all the other files with a reference to that across the project.

5. Auto-suggest and Auto-complete

CTRL + Space

VS Code has *IntelliSense* where the editor helps you in terms of code completion. Whether you are writing dart code or configuration files, always use this shortcut to save you from typing more than you need.

Most of the time, you won’t need to press this as VS Code suggests the best completion anyway.

6. Quick Fix

CMD + .

The other side of auto-complete is the Quick Fix shortcut. Whenever you see an error or red underline in your code, the first thing you should do is apply the quick fix shortcut. VS Code will show a pop-up window showing possible fixes for your error.

To be much more efficient, if you press the shortcut twice, the error will be fixed using the best option (VS Code will choose the best fix for you)

There are a few quick fixes that VS Code can do for you such as fixing imports, implementing interfaces, and access modifier suggestions.

7. Organise Import

Shift + Option(ALT) + O

After working on a file, it should be in your nature to always apply the Organise Import shortcut.

This shortcut arranges your imports found at the top of your file. It also removes unused imports, so be sure to always use this after every edit.

8. Select All Occurrence

CMD + Shift + L

There are times when the Rename shortcut will not work depending on which words or text you want to replace.

For example, you have hard-coded strings in your code that are written repetitively across your file. Instead of using a Find and Replace, you can use the Select All Occurrence shortcut to change this in real-time.

Conclusion

Now that you have learned all the important shortcuts in VS Code, it is up to you to start using them and integrating them into your workflow.

To see all the shortcuts in VS Code, you can find them by going to Settings > Keyboard Shortcuts. You can also customise these hotkeys in the settings.

Originally published at https://themobilecoder.com on June 13, 2023.