Top 10 VSCode Keyboard Shortcuts For Visual Speed-Learners!

Visual Studio Code has hundreds of key bindings. But which ones are best? Or most effective even? This tutorial is going to crack down on some of the most useful VSCode keyboard shortcuts.

Note: This article was originally published at vscode keyboard shortcuts.

This video tutorial explains 10 VSCode Keyboard Shortcuts.

VSCode Keyboard Shortcuts

In this article I created animations explaining some of my favorite VSCode keyboard shortcuts. To be honest the first thing you might want to do is change font size in VSCode (as well as theme colors.)

All VSCode Keyboard Shortcuts (Windows) All VSCode Keyboard Shortcuts (Mac OS X)

In VSCode, aside from simple key combinations the Ctrl + K combo initiates a special action that requires second key of chord. It was added to increase the number of shortcuts you can use.

When you press Ctrl + K you will notice vscode status bar change to a new message that says:

(Ctrl + K was pressed) Waiting for second key of chord…

Having said this…we will start this tutorial!

Just scroll down through this list to see each vscode keyboard shortcut in action. Animations were created to demonstrate each use case. Or watch vscode keyboard shortcuts on YouTube to speed up learning process 🙂

If you already know several basic VSCode shortcuts you might want to further improve your productivity by learning about the lesser known key combos.

To create this list, I went through dozens of commonplace VSCode keyboard shortcuts. I avoided obvious ones and focused on extremely useful shortcuts that are not easy to figure out.

1. Shrink or Expand VSCode Selection

PlatformShortcutWindowsShift + Alt then left or right key.Macshift + control then left or right key.

Wait, what, we could do this?

Open shrink or expand text selection on a separate page.

shrink or expand text selection vscode keyboard shortcut (YouTube video)

I’ll kick this article off with an example of my most favorite keyboard shortcut in VSCode. This shortcut allows you to either expand or shrink selection around natural block scope checkpoints (see animation above.)

On Windows, hold Shift + Alt and use keyboard left and right arrows. On Mac it’s shift + control and the arrows. Left arrow shrinks selection, right arrow expands it.

This shortcut will stop at key points in your function block scopes. It will also stop inside your CSS style definition code and be mindful of opening and closing HTML tags. It helps you to intuitively do what you would have done using the mouse, which saves a lot of time if you develop a habit for using it.

2. Move VSCode Selection One Line Up or Down

Make selection. Hold Alt and press up or down arrows.

Select a word, phrase or a function. While holding Alt use arrow keys up ordown to move the selection up or down in your source code.

3. Copy Current VSCode Line Above or Below Selection

You can duplicate current line or selection to make a copy of it above or below. This might save some time if you were to do same thing using classic copy and paste shortcuts Ctrl + C and Ctrl + V.

Press Shift and Alt and use up and down arrow keys to copy the line either above or below. Continue holding Shift and Alt and using arrows to make as many copies as you need.

(On a Mac, it’s shift and option combo. )

4. Jump Between Matching Opening or Closing { Brackets }

Sometimes it’s hard to tell what function or block scope a closing bracket belongs to. This is true especially when your code is long (like complex API end-point) or generally long functions with multiple for-loops, callbacks and other scopes.

You can easily jump between closing and opening brackets of the same scope with this useful VSCode keyboard shortcut.

To make this work, first you have to make sure the cursor caret is positioned right at the beginning or end of an opening or closing bracket.

Press Ctrl + Shift and \ on Windows. Note: On a Mac it’s Ctrl + command ⌘ and \.

Your cursor will toggle-jump between opening and closing bracket.

5. Indent Code Inside VSCode Selection

Select a line, multiple lines or a block of code delimited by curly brackets that you want to indent. Now you can indent or outdent this block by using Ctrl and either [ or ] on Windows.

On a Mac, it’s command ⌘ and [ or ]

6. Comment Entire VSCode Selection With Single-Line Comments //

Sometimes you want to comment an entire block of code using // character and not the multi-line / / because multi-line comments cannot be nested. That situation can make this key combination useful.

The shortcut is Ctrl + /.

VSCode is intelligent enough to understand whether you’re commenting a block of JavaScript code, CSS code or if you’re commenting HTML. In case of HTML it will actually use HTML comment brackets: <! — → (it will automatically identify type of code you’re in by where your cursor and selection are.)

7. Turn Selected Text Into Multiline Comment

There are times you will want to wrap a block of code using the multi-line comment.

Highlight the code you want to comment and press Shift + Alt + A.

Pressing this combo again (or after selecting any multi-line comment block) will undo the multiline comment.

8. Toggle Word Wrap

To toggle word wrap press Alt + Z.

There are times you need to wrap long lines of code so you don’t have to use horizontal scrollbar to see them in their entirety. This shortcut will break down long lines of code.

9. Create Multiple Cursor Selection On Any Line

Use Alt + Mouse Click to add an extra cursor anywhere in your code.

This is an interesting feature because it allows you to create a cursor (or multiple cursors) on any line, even if those lines are not neighboring. I personally don’t know in which cases this can be useful but I thought it was so unique I decided to document it here.

10. Go To Line Number

This one’s pretty common, but I thought I’d include it here just to be complete.

One of the essential shortcuts is Ctrl + G. It’s helpful when you get a stack trace error and need to jump to a line of code where the error was generated.

Hit the shortcut and start typing line number into popup input box. Then press Enter and your cursor caret will jump to that line number.

This example jumps to line number 10.

11. Replace All Occurrences Of Text In Current Selection

This keyboard shortcut allows you to change an instance of a word, phrase or any span of text defined by current text selection to a replacement text value that you simply type in.

Select something. Press Ctrl + Shift + L. This will select all words that match your current selection. It also adds a cursor to each text span matching your current selection.

Simply start typing your replacement text and vscode will start replacing all instances of text matching your selection in-editor as you type. Press Escape to confirm changes.

In this example we’ve selected the word “yellow” and changed it to “red” everywhere without invoking any extra search and replace UI. Multiple cursors are added automatically.

Change all occurrences in selection / regex / whole word / case sensitive version

If you need advanced search and replace (with regex, case sensitivity and whole word option) use the more advanced Ctrl + H shortcut to replace all occurrences of text.

Alt + C toggles case-sensitivity.

Alt + R toggles regex find and replace.

Alt + W toggles whole word search.

VSCode Keyboard Shortcuts Covered In This Tutorial

  1. Shrink or Expand VSCode Selection
  2. Move VSCode Selection One Line Up or Down
  3. Copy Current VSCode Line Above or Below Selection
  4. Jump Between Matching Opening or Closing { Brackets }
  5. Indent Code Inside VSCode Selection
  6. Comment Entire VSCode Selection With Single-Line Comments //
  7. Turn Selected Text Into Multiline Comment
  8. Toggle Word Wrap
  9. Create Multiple Cursor Selection On Any Line
  10. Go To Line Number
  11. Replace All Occurrences Of Text In Current Selection

Other VSCode shortcut subjects to consider

  • vscode shift left
  • vscode shift enter
  • vscode shift tab
  • vscode shift block left
  • vscode shift tab
  • vscode shift alt f
  • vscode shift enter jupyter
  • vscode shift multiple lines
  • vscode shift tab not working
  • vscode ctrl click not working
  • vscode ctrl click not working c++
  • vscode ctrl click not working golang
  • vscode ctrl click not working php
  • vscode ctrl click not working react
  • vscode ctrl click not working typescript

Final Words

Many visual studio code keyboard shortcuts and key bindings are obvious whether you’re on Windows 10, Mac or Linux — they are part of the standard set of shortcuts offered by many other text editors and IDE­s.

But not all vscode shortcuts are useful, and some are hard to discover or guess. This guide focused on some of the less known but extremely helpful vs code keyboard shortcuts.

Hopefully this tutorial helped you discover at least one new favorite shortcut!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store