VS Code Keyboard Shortcut Essentials

For macOS Users

We are all familiar with basic keyboard shortcuts like Cmd + C and Cmd + V — they make our lives easier, save time, and allow us to work efficiently. If you code with others long enough, you will eventually witness some higher-level shortcut wizardry being used. For those using VS Code, I want to help pull back the shortcut curtain a bit and provide you with some of the most helpful tools to speed up your coding.

Some Housekeeping

First, let’s make sure we’re using the same keyboard symbols and terminology. This will be our key for deciphering shortcut symbols:

Command (Cmd) = ⌘
Option(Alt) = ⌥
Control (Ctrl) = ⌃
Shift = ⇧
Arrow key up/down = ↑/↓
Mouse click = click

Another note before we dive in: if you see something like ⌘K ⌘S you can either (1) press ⌘K, release both keys, then press ⌘S, or (2) keep ⌘ held while pressing K then S. However, if you see something like ⌘K Z you must release both keys after pressing ⌘K, then press Z. Got it? Okay, let’s get into it!

View All Shortcuts

If you want to see ALL keyboard shortcuts available to you, use ⌘K ⌘S within a VS Code file. It will display a list that looks like this:

So, so, so many shortcuts

Don’t let this massive list scare you — there are a ton of shortcuts and not all are created equal. Some are going to serve a very specific niche purpose, others will be much more relevant to our everyday needs. Just know that this list lives here and that its search bar feature can help you look up a specific shortcut by its description.

The Essentials

These are the most practical, time-saving, and generally awesome shortcuts that you should have memorized for working with VS Code.

Let’s start basic with commenting out blocks of code. You can use ⌘/ to comment out the line where your cursor currently resides, or make a selection by clicking/dragging and using the same ⌘/ shortcut to comment out the entire block.

Voila!

Next, we’ll select all instances of a word quickly with ⇧⌘L. This is extremely helpful if you decide to change a variable name or discover you have copy/pasted a typo.

Great for renaming variables that appear in multiple places

Additionally, you can select a word and use ⌘D to also select the next occurrence of the word or ⌘K to skip the next occurrence of the word. As you go through in this manner, you can use ⌘U to return to the last occurrence if a mistake was made.

Change what you need to, not what you don’t

This can be helpful in situations where the item you wish to edit appears in multiple places but also in different contexts.

Multi-line editing with ⌥⌘ ↑/↓ allows you to add additional cursors on the line(s) below/above where you are working depending on the arrow key used.

Quickly work on multiple lines

This can be great for quickly indenting large blocks of code that need tidying up or fixing duplicate omissions like above.

Similarly, multi-cursor editing with ⌥ click allows you to more selectively pick out the areas of your code to edit.

Be more selective with multi-cursor editing

Click as much as you would like to set cursors throughout your editor and then make your edits all at once.

Not Essential, But Nice to Know

Here are a few nice tricks with common applications that will save you time, even if just a little bit. These often have alternative methods through click or menu options that are simple enough, but they sure are nice all the same.

Take ⌘ ↑/↓, which allows you to quickly jump to the top or bottom of an open file.

Quickly navigate to the beginning or end of a file

Yes, you can always scroll through manually but this shortcut is just quicker, especially when working with large files. Alternatively, you can use ⌃G if you know generally what line you’d like to work on to bring up a search bar that takes a line # input.

Very useful for large files that you are very familiar with

Similarly, ⌘P makes navigating through complex file structures a little easier by pulling up a search bar that takes a file name. Observe:

A simple way to navigate through the labyrinth

Another nice one to have is ⌘L which selects all text on the current line. Furthermore, if you press L any number of times after this while still holding ⌘ it will highlight lines beneath the current line as well. Pressing U will de-select the last line as shown below.

Avoid often cumbersome drag-selection

Usually, the habit is to drag-select these lines but one area where ⌘L shines is in selecting a line of code that runs off the page (like a long image URL).

Next, let’s pull up our terminal in VS Code with ⌃` rather than navigating through menus. You can also open additional terminals with ⌃⇧`.

Create as many terminals as you need in this way

The Deep Cuts

These last ones are shortcuts that you probably will not use all the time but are still nice and you should consider implementing them when applicable.

First, let me introduce you to ⌘Z which transports the user to zen mode. What is zen mode? Take a look:

Eliminate distractions with zen mode

Our editor gets full-screened, our terminal disappears, as do our top and side bars. If you know that you just need to crank a bunch of code in a single file, zen mode can be a nice way to stay focused and maybe save your eyes a little strain.

Speaking of eye-strain, if you need to zoom in/out use ⌘= (+) or ⌘- (-). You can also quickly switch to full-screen viewing by using ⌃⌘F.

How young are your eyes?

If you ever need to view multiple files at once, use ⌘\ to pull up split editor.

All of the editors…

This can also be accomplished by clicking a button in the top right corner but where’s the fun in that?

Explore On Your Own

I hope these shortcuts help to streamline your workflow and speed up your coding. If nothing else, it should make you rethink the mundane details that live outside of syntax and language, the mouse movements and edits which can bog down our process and slow our work.

This is by no means a comprehensive list — you may not find some of these super useful and instead get a lot of value from a shortcut I omitted. Experiment and find out what works for you. Happy exploring!