Skip to main content

42 Visual Studio Code Shortcuts for Boosting Your Productivity

By Shahed Nasser
Programming
Share:

In this article, we’ll go over some of the most useful Visual Studio Code shortcuts that will save you time and supercharge your development when using Visual Studio Code. This article covers default keyboard shortcuts for Windows, Linux and macOS.

Visual Studio Code (VS Code) is one of the most popular and most used code editors. It’s open source and free to use. It also provides support for many languages and frameworks, whether through built-in features or the extensive list of extensions available for the editor.

Please note that these Visual Studio Code shortcuts are taken from VS Code’s documentation. If some shortcuts don’t work, it could be due to changes in shortcuts in your editor or file format, or sometimes due to extensions installed.

Easy VS Code Navigation Shortcuts

This section presents all the Visual Studio Code shortcuts that allow you to navigate different parts of the editor.

Open a file

Searching for a specific file, especially as the project gets larger, can chew up a lot of time. Even if you already know where the file is, it’s definitely handy to learn this keyboard shortcut to easily open files in your project.

  • Windows/Linux: ctrl + P
  • macOS: command + P

Open settings

Visual Studio Code comes with a lot of features and settings that you can change to fit your needs. This keyboard shortcut makes it easier to get to the settings whenever necessary.

  • Windows/Linux: ctrl + ,
  • macOS: command + ,

Toggle sidebar

A lot of times you need more space for the open file you’re working on. So, this keyboard shortcut is handy to show or hide the sidebar whenever necessary.

  • Windows/Linux: ctrl + B
  • macOS: command + B

When you have a lot of tabs open and you need to move between them, one easy way to do it is with this keyboard shortcut, which shows you the list of the tabs and lets you navigate between them and choose which one you want to open.

  • Windows/Linux: ctrl + shift + tab
  • macOS: control + shift + tab

Keep pressing tab to switch between tabs.

One of the nice features that Visual Studio Code provides is creating tab groups. Tab groups allow you to split up your tabs into groups, and each editor group takes a part of the screen.

This keyboard shortcut makes it easier and faster to navigate between groups in the editor group history. This shortcut also allows you to create a new group if the editor group you select in the shortcut is higher than the number of groups currently open.

  • Windows/Linux: ctrl + 1 or 2 or 3
  • macOS: command + 1 or 2 or 3

Open the terminal

During your development, you’ll most likely be using the terminal a lot. Visual Studio Code allows you to open a terminal window right inside the editor. This saves you from moving between the editor and the terminal and allows you to completely focus on the editor and the code.

  • Windows/Linux: ctrl + J
  • macOS: command + J

Terminal open in Visual Studio Code

Open the command palette

There are lots of commands you can execute in Visual Studio Code. These commands can be related to out-of-the-box features or extension features.

With this keyboard shortcut, you can easily open the command palette. The command palette allows you to search through the commands you can use and execute them.

  • Windows/Linux: ctrl + shift + P
  • macOS: command + shift + P

Visual Studio Code command palette

Quick Selections

During development, you’ll most probably need to make selections in your code, whether for copying, cutting, or other purposes.

Instead of doing so with your machine’s mouse, doing it with the keyboard saves you time. These keyboard shortcuts focus on making selections quickly.

Select current line

A lot of times you need to select the entire current line your cursor is at. This keyboard shortcut makes it very simple.

  • Windows/Linux: ctrl + L
  • macOS: command + L

Similar occurrences

How many times do you need to rename a variable, or simply change a certain repeated text or phrase throughout the entire file you’re working with?

Two keyboard shortcuts can be used in a situation similar to this. The first requires you to already have the word or phrases selected, while the other doesn’t.

Current selection

With this keyboard shortcut, all you need is to have one occurrence of the text you’re looking for in the file selected. Then, by pressing the keys of the shortcut, you’ll select all its occurrences in the file.

  • Windows/Linux: ctrl + shift + L
  • macOS: command + shift + L

Current word

This keyboard shortcut allows you to do the same as the previous one, but without having anything selected. While the cursor is placed on a word, you can press the keys of this shortcut and the current word with all of its occurrences in the current file will be selected.

  • Windows/Linux: ctrl + F2
  • macOS: command + F2

Note: on macOS, make sure to press fn at the same time as F2.

Selecting each instance of a word

Select until the end of the word

When selecting a certain part of the code, you can easily move and expand the selection with this shortcut. You can use the right arrow or the left arrow to go in the direction you want.

  • Windows/Linux: shift + alt + or
  • macOS: shift + option + or

Multiple Selections

Mastering these keyboard shortcuts will boost your development speed and makes you a coding hero. These keyboard shortcuts allow you to select across multiple lines to make necessary modifications or additions.

This saves you from repeating yourself and saves you the additional time you’d spend doing the same operation across multiple lines.

Select a column or box of code by dragging the mouse

Dragging your cursor across lines of code or text selects each line from end to end. But you can also select a group of lines only partially with this shortcut. Multiple lines will be selected, but only as much of them as you drag over.

  • Windows/Linux: shift + alt + drag mouse across the lines
  • macOS: shift + option + drag mouse across the lines

Select a column or box of code with arrow keys

You can do the same as above but without using your mouse. Instead of dragging a mouse, you use they keyboard arrow keys.

  • Windows/Linux: ctrl + shift + alt + or or or
  • macOS: command + shift + option + or or or

Selecting a column or box of code in VS Code

How to Use Find Results

All editors, even simple editors, should have a find feature so that you can find certain words, like function or variable names, phrases, or blocks of code either in the current selected file or across multiple files.

This section will go over keyboard shortcuts that will allow us to make the best out of the results of using the find feature in Visual Studio Code.

You can use this keyboard shortcut to move between find results in the active file.

  • Windows/Linux/macOS: F3

Note: on macOS, make sure to press fn at the same time as F3.

Select multiple results

If you’re using the find feature to find certain bits of text so that you can modify a subset of these results, you can use this shortcut to navigate and select the find results in the active file.

  • Windows/Linux: ctrl + D
  • macOS: command + D

Select all results

If you’re using the find feature to do certain modifications with all the find results, this keyboard shortcut allows you to select all the find results.

  • Windows/Linux: alt + enter
  • macOS: option + enter

Code Navigation

As each file or project grows, it becomes harder to find certain parts of the code. Finding errors or going to the code at a certain line can be hard when doing it manually.

These keyboard shortcuts save you the hassle and allow you to invest your time in what you actually want to do.

Go to line

Finding code at a certain line is especially helpful when you get a compile or runtime error that specifies what line of code caused it. This keyboard shortcut eliminates the need to actually find the line yourself.

  • Windows/Linux: ctrl + G
  • macOS: control + G

Go to a specific line

Go to matching bracket

You’ll often find yourself needing to find the matching closing bracket of a block. This is especially true when the files grow with time. This keyboard shortcut allows you to easily find the closing matching bracket of the current block. In HTML tags, it allows you to move to the end of the current tag.

  • Windows/Linux: ctrl + shift + \
  • macOS: command + shift + \

Fold/unfold Block

When reading a file with a lot of lines or data, it’s easier to fold (hide) an entire block that you’re not currently focusing on so you can focus on something else. This keyboard shortcut allows you to fold or unfold a block. Click anywhere in the block and then hit the following keys.

  • Windows/Linux: ctrl + shift + [ or ]
  • macOS: command + option + [ or ]

A collapsed code block

Fold/unfold blocks and sub-blocks

What if the block contains sub-blocks? Using the above command will fold the parent, but when the parent is unfolded the sub-blocks will have been unchanged. If you need to fold and unfold a block and its sub-blocks, you can do it with this keyboard shortcut.

  • Windows/Linux: ctrl + K + [ or ]
  • macOS: command + K + [ or ]

Finding errors and warnings in your code is essential. Sometimes some errors are not easy to find — such as when a line doesn’t end with ; as it should. This keyboard shortcut saves you the hassle of scrolling or thoroughly looking through the line to find the exact problem. It allows you to move to the next error or warning.

  • Windows/Linux/macOS: F8

Note: on macOS, make sure to press fn at the same time as F8.

Moving the Cursor

In a lot of cases, you might need to have multiple cursors, each at a different position in the file. These keyboard shortcuts help to make it easier to move around with multiple cursors.

Insert additional cursors

There are two ways to insert an additional cursor into the file: either at a specific position, or above/below the current line the cursor is at.

1. At position

This keyboard shortcut allows you to insert an additional cursor at any point in the file.

  • Windows/Linux: alt + mouse click at the position
  • macOS: option + mouse click at the position

2. Above or below

The second way you can insert a cursor is to insert it above or below each of the current cursor positions.

  • Windows/Linux: ctrl + alt + or
  • macOS: command + option + or

Adding multiple cursors

Undo cursor insert

What if you inserted a cursor by mistake, or realized later that you don’t want to insert the cursor at that position anymore? This keyboard shortcut allows you to undo the last cursor insert. This is very helpful when you’ve inserted multiple cursors, as it allows you to keep the others in place and just removes the last inserted one.

  • Windows/Linux: ctrl + U
  • macOS: command + U

Insert the cursor at the end of a highlighted selection

Another keyboard shortcut that makes your development faster is to insert the cursor at the end of a highlighted selection.

  • Windows/Linux: shift + alt + I
  • macOS: shift + option + I

Faster Coding

In this section, we’ll go through Visual Studio Code shortcuts that will make certain operations related to your code easier and quicker.

Move lines and blocks

A lot of times you might need to move a line from one position to another. Instead of copying or cutting and pasting the line into another position, this shortcut offers a faster solution. Just place the cursor on the line.

  • Windows/Linux: alt + or
  • macOS: option + or

This will also move a whole paragraph of text that the cursor is active in. If you want to move a block of code, simply highlight that code before pressing the shortcut above.

Moving a line up and down

Copy lines and blocks

What if you need to copy a line and paste it below or above?

Instead of having to actually copy and paste the line, this shortcut duplicates the line either below or above it, based on the direction chosen with the arrows.

  • Windows/Linux: shift + alt + or
  • macOS: shift + option + or

To move a block of text or code in the same way, highlight it first and then use this shortcut.

Duplicating a line of code

Indent/outdent lines

As you copy lines from one place or file to another, or as you make changes to the code, a lot of times the code will end up wrongly indented. This shortcut allows you to easily indent or outdent lines as necessary. Select multiple lines to move them all together.

  • Windows/Linux: ctrl + [ or ]
  • macOS: command + [ or ]

Toggle comments

In a lot of cases, you might need to comment or uncomment a line. This can be easily done with this shortcut. This works for both line and block comments.

Line Comments

Click on the line you want to comment out. (If you highlight a block of code, this command will comment out each line individually.)

  • Windows/Linux: ctrl + /
  • macOS: command + /

Commenting out a line

Block Comments

Unlike the above shortcut, the following shortcut will comment out the code you highlight as a single comment.

  • Windows/Linux: shift + alt + A
  • macOS: shift + option + A

Commenting out a block of code

Code formatting

It’s essential to keep your code and files formatted for readability reasons. Visual Studio Code provides two shortcut commands for code formatting.

File

This shortcut allows you to format the entire file.

  • Windows/Linux: ctrl + shift + F
  • macOS: option + shift + F

Selection

This shortcut allows you to format just the selected set of lines in a file.

  • Windows/Linux: ctrl + K, then ctrl + F
  • macOS: command + K, then command + F

Formatting a block of code

Quick fix

In a lot of cases when there’s an error, Visual Studio Code can resolve it if it’s a common or simple mistake — for example, if a semicolon ; is missing. This shortcut allows you to apply the quick fix to any error or warning if the quick fix is available for it.

  • Windows/Linux: ctrl + .
  • macOS: command + .

Renaming

Renaming a variable, function, or class that’s used multiple times can be prone to errors if done manually. You might miss a usage of it whether in the current file or a different file. This shortcut gives you a safe way to rename any symbol.

  • Windows/Linux/macOS: F2

Note: on macOS, make sure to press fn at the same time as F2.

Trim white spaces

Why manually trim white spaces from the end of a line when you can just do it with this shortcut?

  • Windows/Linux: ctrl + K + X
  • macOS: command + K + X

Note: holding ctrl or command throughout, press K first, then X separately.

Change programming language

By default, Visual Studio Code detects the current programming language of the file you’re working on. Usually, it’s done by checking the extension of the file.

However, sometimes it doesn’t correctly detect the language if the extension of the file isn’t supported.

For that reason or any other reason, if you need to change the programming language of a file you can use this shortcut.

  • Windows/Linux: ctrl + K, then M
  • macOS: command + K, then M

Run code

One cool VS Code feature is the option to run code right in the editor. This depends on the language, framework, or the kind of task you need to run. For example, you can set up debugging for Javascript projects. However, if you have a debugger or task runner configured, you can use this shortcut to run code in VS Code.

  • Windows/Linux/macOS: F5

Note: on macOS, make sure to press fn at the same time as F5.

Better Coding

These keyboard shortcuts revolve around understanding the code that we’re working with to produce better code.

To write good quality code, we need to understand the functions, classes, or methods we’re using.

Sometimes, we resort to googling a function to see its definition or signature. However, this might end up wasting our time or it might not apply to the code we’ve created.

Check definition

It’s essential to understand the definition of the code we’re using before actually using it. These Visual Studio Code shortcuts allow us to see their definition and documentation easily from the editor.

Go to definition

This shortcut takes us to the file or line where the part of code is initially defined.

  • Windows/Linux/macOS: F12

Note: on macOS, make sure to press fn at the same time as F12.

Peek definition

This shortcut allows us to open definition and documentation in the same place we’re checking the definition. This makes it easier to see the definition without the need to move to another file or line.

  • Windows/Linux: alt + F12
  • macOS: option + F12

Note: on macOS, make sure to press fn at the same time as F12.

Toggle suggestions

While writing our code, VS Code or some of the extensions we’ll have installed will show us suggestions for our code. This shortcut allows us to toggle the suggestions to see or hide them.

  • Windows/Linux: ctrl + I
  • macOS: command + I

Show a function’s signature

This is very common with most, if not all developers. We tend to forget functions’ signatures, even when they’re functions that we use a lot. With this shortcut, you can easily see parameter hints for the function. With the parameter hints, you can check what parameters you need to pass to the function.

  • Windows/Linux: ctrl + shift + spacebar
  • macOS: command + shift + spacebar

Zen mode

Although this is not related to understanding the code and definitions, this shortcut is useful if you need to be completely focused on your code. With this shortcut, you can enable Zen mode, which will change the display to be completely focused on the currently open file.

  • Windows/Linux: ctrl + K, then Z
  • macOS: command + K, then Z

Press the same keyboard shortcut to return to the normal editor view.

Zen mode: no distractions

Conclusion

VS Code is one of the best code/text editors for developers at the moment. It provides a lot of out-of-the-box features as well as an extension marketplace that allows developers to easily contribute and provide extensions for the community.

Keyboard shortcuts make development in VS Code even easier and allow you to focus on building good-quality projects in less time.

In this article, we’ve covered some useful Visual Studio Code shortcuts that are guaranteed to make your development faster.

VS Code still has a wider set of keyboard shortcuts to do more. Here are links for checking out the whole set of default keyboard shortcuts for your OS:

I am a full-stack developer passionate about learning something new every day, then sharing my knowledge with the community.

Integromat Tower Ad