A Beginner’s Guide to Using Keyboard Shortcuts in VS Code
Improving workflow efficiency by using built-in shortcuts
Have you ever been working through a tedious coding project, and simple computer interactions were slowing you down? There are countless times where you will need to copy a line of code to reuse, shift around a code block, or find a previously written variable. There is also a constant need to be saving your file to ensure the code is up-to-date. Each of these small tasks take time, and it’s important to identify what improvements can be made.
Your time is valuable — I am a huge advocate for assessing a workflow, finding patterns, establishing goals for growth, and implementing change in order to constantly improve efficiency. As programmers, we need all interactions to be easy and repeatable. Enter: keyboard shortcuts.
Keyboard shortcuts have been created to make programmers’ lives easier.
In most programs you use, if not all, there are shortcuts built-in by the developer to make common commands or multi-click paths more accessible. If you implement them effectively, you will find yourself working quicker and with less frustration.
So… Which Shortcuts Should I Learn First?
Here are some of the MacOS shortcuts I have found most useful while working in VS Code:
⌃~ : Show integrated terminal
(control + ~)
When starting a new project or opening a file, this command is a quick way to open the integrated terminal to get started. Rather than finding Terminal > New Terminal in the menu bar, you can open the terminal instantly using a quick keystroke.
⌥↓ / ⌥↑ : Move line down/up
(option + down arrow) /(option + up arrow)
I have found this command incredibly useful when I need to move around code. Rather than the standard cut and paste, you can easily shift your code into the desired position without breaking from your keyboard. This works for either a single line or a full code block.
⇧⌥↓ / ⇧⌥↑ : Copy line down/up
(shift + option + down)/(shift + option + up)
Similar to moving a line or block of code as described above, you can just as easily copy the selected code to a new line. This eliminates the standard copy and paste and allows you to insert copied code so you can get to the next step quicker.
⌘/ : Toggle line comment
(command + /)
Everyone comes to a point during initial coding, debugging, or refactoring where specific code becomes obsolete. Or maybe you forget to type the ‘#’ before you start writing your pseudocode. Rather than deleting it from the file, you can use this shortcut to comment it out. I use this a lot if I am changing my code, but don’t want to delete everything until I confirm the new solution works.
⌘\ : Split terminal windows
(command + \)
While I am working with several models, I like to open a side-by-side view to ensure I remain consistent with language in corresponding files or to reference what is happening somewhere else in the program. This is helpful by providing visibility into other parts of your code without clicking through several files to find what you are looking for.
⌘B : Toggle sidebar
(command + B)
The sidebar/file list sometimes gets in the way of your terminal view. If you are looking for more space across your screen, this is a quick way to hide the sidebar. Usually you have your working tabs open and don’t need to access the sidebar often anyway!
⇧⌘L : Select all occurrences
(shift + command + L)
If you find the need to select all of the occurrences of a variable or keyword throughout your code, all you need to do is click on a value, use this keyboard shortcut, and it will automatically select all matching values within that file. This is an extremely quick way to change a variable name without concern that you missed one somewhere.
⌥ : Manually select and edit
(option + click)
A slightly modified use of the above concept is by holding the option key and selecting words manually. If you copy a code block and need to write the same value in different places, but don’t want to edit every matching value within the file, this is very useful as well.
⌘F : Find
(command + F)
As useful as this is when searching a website or document for a specific value, it is especially useful within VS Code when you have a lot of code written. It takes a long time to click through tabs, scroll through all the code, and find what you are looking for. I use this command often to find instances of a variable or to find a keyword within the code, which is a huge time saver.
⌘S : Save
(command + S)
This one seems obvious, but it’s important to note. Rather than hitting File > Save whenever needed, using this shortcut is much more seamless. I use this so often that it has become a habit, and I save my file without even realizing.
⌘K ⌘S : Open keyboard shortcuts
(command + K) then (command + S)
View the full list of all keyboard shortcuts that are already built into VS Code.
A PDF list of all the MacOS shortcuts for VS Code can be found here.
Looking to Modify an Existing Shortcut?
Great! If you’re thinking one of the shortcuts is hard to learn, or that you are accustomed to a different shortcut, VS Code makes it easy to modify or create your own.
Once you are within the Keyboard Shortcuts menu, all you need to do is double click on an existing key binding, and a prompt will come up asking you to type in the new shortcut. If that key binding is already in use, it will tell you. This will prevent you from overriding another shortcut !
VS Code has a great summary about key bindings (keyboard shortcuts) and how to make changes, which you can find here.
Conclusion
As you can see, there are ways to make your life easier and increase your efficiency by implementing a few changes to your workflow. As programmers, we should always be looking for ways to eliminate any roadblocks and streamline common processes to save time overall. These are quick, easy changes to learn, and as you continue to practice, they will become natural.
