Learn CSS Visually! Every single CSS property visualized in this pictorial CSS guide book!

⭐⭐⭐⭐ and 1/2⭐ - owned by over 27.1K readers.

Get this CSS book in PDF format, on Amazon or start reading this css book on your Kindle device today!

VSCode Keyboard Shortcuts

Let's take a look at some of the most important VSCode Keyboard shortcuts to help increase productivity. VSCode has hundreds of keyboard bindings. But, only few are important. If you master these keyboard shortcuts you're guaranteed to increase your performance.

It took hours to put this tutorial together. Please help out by sharing it 🙂

Click this button to share link on WhatsApp or Discord or with friends:

Hey guys, thanks to visitors like you this VSCode Shortcuts article has been viewed over 59.2K times. Over the years I've been improving this list of best visual studio code keyboard shortcut examples! Watch this quick video to get started:

Below you will find more VSCode learning material, as well as each keyboard shortcut explained individually. Don't forget to Ghost Together (sign up below, to find out what it means.)

I skipped simple ones like Ctrl-X and Ctrl-Z because that's obvious and the same in pretty much in any text editor. So my focus has been primarily on best vscode keyboard shortcuts. (If best is defined as keyboard shortcuts that boost productivity the most.)

This article is not complete, so feel free to post a comment at the bottom and share how you use VSCode keyboard shortcuts to stay more productive, this can help the coding community!

All Visual Studio Code keyboard shortcuts can be freely looked up on official site. But there are too many, it can be overwhelming, and most keyboard shortcuts in vs code will never be actually used.

In this article, I created a list of the most helpful VSCode shortcuts, with animated examples.

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

Wait, what, we could do this?

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. But on the Mac control is also known as alt, as its secondary function.)

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.

Multiple cursors allow you to edit code in multiple places at the same time.

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.

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.

How To Edit Keyboard Shortcuts In VSCode?

Visual Studio Code allows you to assign your own keyboard shortcuts (edit keyboard shortcuts) to any standard editor function. You can also rename an existing keyboard shortcut. VSCode has a global keyboard shortcut editor for that.

Here's what it looks like (VSCode has hundreds of shortcuts!):

To add your own keyboard shortcut to vscode, follow these steps.

Press Ctrl + K, followed by Ctrl + S (Note: you don't have to release Ctrl.) You'll enter keyboard shortcut editor where you can also search all key binding whether you're on Windows, Mac or Linux. This will display a screen with a list of all currently bound keyboard shortcuts, there are hundreds.

Double click on any of the keyboard shortcuts and a new box will pop up with an input field. Click inside it and simply press the key combination to reassign to your own shortcut.

You probably already know about this official VSCode keyboard shortcuts PDF. But VSCode potentially has hundreds of keyboard shortcuts not even mentioned in this official doc. You can access the table of all VSCode keyboard shortcuts, change binding of existing shortcuts or add your own custom key combination.

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

VSCode Keyboard Shortcut Reference Table

This table is an overview of all vscode keyboard shortcuts we've looked at in this tutorial and some extras that weren't mentioned. (Code formatting and folding and unfolding code for example.) It will be used as a vscode keyboard shortcut reference for improving this article in the future.

For clarity only Windows shortcuts are shown. On a Mac, usually replace Shift with command key. The rest of it is the same in most cases.

What is Ctrl + K + S? In VSCode Ctrl + K then S will pop open a searchable vscode keyboard shortcuts editor. This is where you can rewire existing key bindings. You can filter key bindings by using the search box. There are hundreds (if not over thousand) bindings.

What is Ctrl + K? In VSCode Ctrl + K combo waits for "second key of chord." Double-key shortcuts help VSCode provide more unique shortcut combinations. When you press Ctrl-K VSCode will ask to provide "second key of chord," which is simply another key. For example Ctrl + K, followed by F is the shortcut for formatting code in 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

VSCode provides a wide range of keyboard shortcuts that allow you to quickly perform common actions. For example, you can use the "Ctrl+C" shortcut to copy text, or the "Ctrl+V" shortcut to paste text. You can also use keyboard shortcuts to navigate through your code, or to format and refactor your code.

In addition, VSCode provides a number of customizable shortcuts that you can use to perform actions specific to your workflow. To view a list of all the keyboard shortcuts available in VSCode, press "Ctrl+K Ctrl+S". This will open the Keyboard Shortcuts reference in the sidebar. You can then use the search box to find a specific shortcut, or browse through the list of shortcuts by category.

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!

Learn CSS Visually! Every single CSS property visualized in this pictorial CSS guide book!

⭐⭐⭐⭐ and 1/2⭐ - owned by over 27.1K readers.

Get this CSS book in PDF format, on Amazon or start reading this css book on your Kindle device today!

It took hours to put this tutorial together. Please help out by sharing it 🙂

Click this button to share link on WhatsApp or Discord or with friends: