VS Code Tips & Tricks
Notes: 01. Explore Keyboard Shortcuts
This updated version now shows on-screen shortcuts commands for both mac and windows.
Prerequisites include a Flutter installation setup with VS Code (Dart and Flutter Extension must be installed already). Non-Flutter developers could skip the Flutter installation as knowledge obtained here could be used for other development languages or frameworks. The sample project that comes with the course uses the Dart version before nullability was added to the language. Downloading and running the project would work correctly, but copying and pasting code may generate liniting errors if the code is not null-aware. This course is not dependent on the sample project so you can follow along with any project you have.
Visual Studio Code is an easy to use code editor that works great when developing Flutter apps. Using keyboard shortcuts is a common approach used by programmers during development. Visual Studio Code provides lots of keyboard shortcuts for most commands and gives us the option of adding more to suite our needs.
Utilizing this feature could help make your Flutter development a bit faster. Modifier keys are used to perform keyboard shortcuts and here are abbreviations and symbols for each modifier.
The sample app is a shortcuts app that shows the list of VSCode shortcuts for both mac and windows. You could refer to this anytime to help you memorize them. We would cover common shortcuts during this course and provide links to download the official cheat sheets from Visual Studio Code’s documentation.
Open up the starter app in VSCode. Run the app by pressing F5. This is a basic app that just shows the keyboard shortcuts for both mac and windows on different tabs. We would be using the project code for demonstration purposes in this course.
This means that you could follow along with any Flutter project of your choice. Press Shift + F5 to stop the app. Next, let’s change up VSCode.
We could hide and show different parts of the editor. Press Ctrl + B to toggle the Side Bar. To toggle the Debug Console, press Ctrl + Shift + Y. To toggle the Output, press Ctrl + Shift + U.
For Problems tab, press Ctrl + Shift + M. Finally for the Terminal, press Ctrl +`
You could also hover over them to get their keybindings in case you forget them. To re-open previously closed editors, you press Ctrl + Shift + T. Press Ctrl + W to close the editor. If no editor is open and you execute that command, then it would close the window.
To open a recent workspace ie. a folder that was previously opened in VSCode, press Ctrl + R. This shows you a palette with a list of previously opened workspaces. You could select the one you wish to open. Holding down Ctrl key while selecting opens the workspace in a new window.
Visual Studio Code provides us with a very powerful tool: “The Command Palette.” Press Ctrl + Shift + P to open it up. It contains a list of all the commands we could run inside of VSCode. And beside each command is the corresponding shortcut for it.
We could search for what we want do like “Toggle Minimap”. Selecting it toggles the minimap. And we’ll have to go to a file to see it in action. A minimap is just a bird’s eye view of the current file and we could scroll through it easily.
Let’s remove the minimap. Open up the Command Palette by pressing Ctr + Shift + P and we could see the “Toggle Minimap” command up there because VSCode stores recently used commands. Now select it, and the minimap is hidden.
The Command Palette is just a quick way to navigate to and execute commands without having to leave the keyboard. Every action you can perform from the menus can be executed from the Command Palette. The F1 key also opens the Command Palette.
We could search for Flutter and see Flutter related commands. Note that these commands were added by the Flutter VSCode extension. Let’s say you’re working on a large project with many files and folders and you want to quickly open a file and maybe only remember some part of the file name.
You could search for “Go To File” in the Command Palette but for this, press Ctrl + P, then you type in the file name. Hit enter to select the file. Now you have it open in your editor.
To see all keyboard shortcut bindings, hold down Ctrl then press K + S. This opens up the “Keyboard Shortcuts” screen which shows all the keybindings and when they can be executed. You could search based on command name or keybinding. You could also change or add a shortcut by selecting the command and enter the new keybinding.