Visual Studio Code, or VS Code for short, is an Integrated Development Environment (IDE) by Microsoft, that provides features necessary for code writing, running, and debugging. VS Code is one of the most popular IDEs because it’s lightweight, user friendly, cross platform, and is constantly adding helpful updates and extensions.
In order to work quickly within VS Code it’s important to know a few simple keyboard shortcuts that allow you to perform a variety of actions without ever touching the mouse or trackpad. In this article, we’ll cover some commonly used shortcuts to take your VS Code skills to the next level.
Open the VS Code Command Palette
The VS Code command palette is a small window that links you to frequently used or helpful commands that perform specific functions. From the command palette, you can close the current window, clear the console, run extensions, and change the tab size.
Mac: Cmd + Shift + P
Windows: Ctrl + Shift + P
Open the Terminal in VS Code
The terminal is one of the most important inbuilt features in VS Code. With only a few keys, you can create a new terminal and toggle between panels without any hassle.
Mac: Control + Shift + ‘
Windows: To create a new terminal, Ctrl + Shift + ‘. To toggle the terminal panel, Ctrl + ‘
Open New Window
Want to open another project even though there is already one sitting in front of you? Then a new window is a way to go. What you’d normally achieve with two clicks, you can now do effortlessly by holding down three keys on your keyboard.
Mac: Shift + Cmd + N
Windows: Ctrl + Shift + N
Move Line Up/Down
Ah look, you typed an entire line in the wrong place. To move the line, you’d have to first select, cut it, and then paste it in the right position. What if with just two keys, you could move the line up or down? With your cursor on the line you want to move, you can hit the following keys.
Mac: Option + up arrow/down arrow
Windows: Alt + up arrow/down arrow
Create New File
To quickly create a new file without having to click around too much, you can hold down on the ctrl and N keys. This creates a new file, where you can set the preferred file name and language extension.
Mac: Cmd + N
Windows: Ctrl + N
Quick Open Files
Instead of scrolling through a probably very large bunch of folders to find a single file in the sidebar, you could open a small search window that allows you to search files by names, no matter how nested they may be in folders.
Mac: Cmd + P
Windows: Ctrl + P
Toggle Left Sidebar
Sometimes, you have to admit that the sidebar takes up a bit of space. You can easily toggle it open and shut with only two keys on your keyboard.
Mac: Cmd + b
Windows: Ctrl + b
Looking for a certain word in your code base, then search is a lightning-fast way to do this. You can quickly open up the search panel in the sidebar by holding down on the following three keys.
Mac: Cmd + Shift + F
Windows: Ctrl + Shift + F
Select All Occurrences of a Current Selection
During coding, we sometimes realize that throughout an entire file, we’ve been typing some function or class name wrong. We might want to edit all occurrences of this name or delete them all at once. Manually going through the file to do this won’t necessarily take a minute, so there is a magic shortcut you can use to achieve this. All you need to do is highlight the word and hit the keys below.
Mac: Shift + Cmd + L
Windows: Ctrl + Shift + L
Open Keyboard Shortcuts Editor
Quickly opens a list of keyboard shortcuts just in case there is one you quickly want to find. The commands are organized beautifully in alphabetical order and provide keyboard shortcuts depending on your operating system.
Mac: Cmd + K Cmd + S
Windows: Ctrl + K Ctrl + S
Comment or Uncomment a Selection of Code
Commenting and uncommenting code is very helpful, especially when you are trying to debug, or test the behavior of some particular part of your code. You can quickly select a portion of your code, and based on what language or syntax you use, VS Code will turn that portion into a commented block all at once.
Mac: Cmd + K Cmd + C
Windows: Ctrl + K Ctrl + C
Show all Symbols
Your project could be made up of text, as well as symbols. Manually, symbols are harder to find than text. This shortcut opens up a window that shows all the symbols present in your project, no matter how nested they are.
Mac: Cmd + T
Windows: Ctrl + T
In some situations, like a live stream for example, zooming in and out to clearly see and/or show the audience what you are doing is important. You can easily accomplish this directly from your keyboard.
Mac: Cmd + = (zoom in)
Shift + Cmd + – (zoom out)
Windows: Ctrl += (zoom in)
Ctrl + – (zoom out)
Toggle Word Wrap
Scrolling horizontally to see the end of the line can be nerve-wracking, especially if you are trying to read along many lines of code carefully. You can easily fold all the text in your code editor to fit the size of the window so that you see everything all at once. You can toggle word wrap with only two keys on your keyboard.
Mac: Option + Z
Windows: Alt + Z
Coding without any distractions is a level every developer wants to achieve. With zen mode, all you have in front of you is your code. No sidebars, no buttons, no menus, nothing. Except you want to keep toggling zen mode on and off every now and then to find things you need, you would need to know basic keyboard shortcuts in order to use it effectively.
To enable zen mode, hold ctrl(cmd) and K on your keyboard, release the ctrl(cmd) key, and then hit the Z key. To leave zen mode, you can hit the escape key on your keyboard twice.
Mac: Cmd + K Z
Windows: Ctrl + K Z
It feels like having two monitors, where you can easily switch between views. To open a file in split view, hold down on the ctrl(cmd) and backward slash.
Mac: Cmd + \
Windows: Ctrl + \
A small percentage of errors during coding comes from saving issues. It’s easy to forget to hit ctrl + s before running your code. VS Code provides a way for you to save your code, without you having to ever manually save code. From your settings.json, you can change the drop-down under Files: Auto Save to afterDelay. With this setting, with whatever change you make to a file, VS Code automatically saves your work.
– Open settings.json ctrl +, (cmd + ,)
– Set Files: Auto Save to afterDelay in the drop-down menu
– or use File > Auto Save
Navigate to a Specific Line
Error messages usually come with the specific or suspected line where the error is coming from. With files that usually span thousands of lines, it would be time-consuming, to scroll to a specific line. VS Code has a keyboard shortcut that opens up a small command palette where you can enter the line you want to go to, and it immediately moves your cursor there.
Mac: Cmd+ G, Cmd + P
Windows: Ctrl + G
Get Rid of Whitespaces
In some programming languages, white spaces can be a pain. To trim or get rid of all trailing whitespaces,
Mac: Cmd + K, Cmd + X
Windows: Ctrl + K, Ctrl + X
Open Markdown Preview
Markdown is commonly used for documentation and project READMEs. You can write markdown in VS Code, and the editor also provides a way to preview the output of your markdown files. Navigate to the markdown file you want to preview, and hold down on the ctrl(cmd), shift, and v keys to open the preview in another window.
Mac: Cmd + Shift + V
Windows: Ctrl + Shift + V
Even better, you can open the markdown file alongside the preview, and see changes reflect automatically as you type in your markdown file.
Mac: Cmd + K V
Windows: Ctrl + K V
Optimize VS Code with Just Your Keyboard
These shortcuts are an easy way to quickly navigate VS Code and hence, make ample use of the editor. To check out a full list of available shortcuts, you can download the keyboard shortcut cheatsheet from VS code for Windows, Mac, and Linux.