10 Useful VSCode Shortcuts That Will Make Your Coding Life Easier

Vishal Pallerla•March 31, 2023

Whether you're a VSCode newbie or an old hat, it's a good idea to check out these shortcuts for increased productivity. Although some of these shortcuts may seem obvious, from witnessing the amount of beginner questions like: Is there a shortcut key for... ?, How do I do this with a keyboard shortcut?, and How can I quickly…, encouraged me to build up this collection of shortcuts in order to help developers save time when coding in Visual Studio Code.

These shortcuts will help you save hours of precious time and accomplish more every day.

1. Go to Definition: F12 #

The Go to Definition shortcut in Visual Studio Code is a time-saving feature that allows you to navigate your codebase quickly and efficiently. To use this feature, simply highlight the keyword or function that you want to navigate to, and press the F12 key on your keyboard (or right-click and select Go to Definition). This will take you directly to the line of code where that keyword or function is defined.

This feature not only saves time, but also helps improve your understanding of your codebase, making it a must-have for developers working with large, complex projects. So why not give it a try and see how it can help streamline your workflow today?

 💡 Dev Tip: If you are a MacBook Pro user like me and would like to have function keys appear permanently in the touch bar for specific apps, follow these steps.

• Choose Apple menu  > System Preferences, then click Keyboard
• Click Shortcuts at the top of the window, then select Function Keys from the left
• Click the add button (+), then select an app and click Add

2. Expand Code Snippets: Tab #

Code snippets are small pieces of reusable code that can be quickly inserted in VS Code using the "Expand Code Snippets" shortcut. By typing a few characters of the code snippet and then pressing "Tab," you can insert the full snippet and customize it if needed. Using code snippets saves time, since you don't have to write frequently used code repeatedly, and they're useful for commonly used items like function headers or class definitions.

Code snippets are a great way to accelerate your development workflow. By storing commonly used code in a snippet, you can build it into your project with a single keystroke.

3. Quickly Find Results Using the Search Bar #

VS Code has a built-in search bar shortcut that allows users to quickly find results without having to navigate through different menus.

To use the search bar shortcut, simply press Ctrl + Shift + F (Windows/Linux) or Cmd + Shift + F (Mac)

The search bar shortcut is particularly useful for developers who need to search through their codebase or project files quickly. Additionally, devs can save their search queries as named searches, making it easy to perform the search again later. Overall, the search bar shortcut is a simple yet powerful tool that can save users a lot of time when searching for specific files or information in VS Code.

💡 Dev Tip: You can just press f4 or shift+f4 repeatedly to navigate the search results.

4. Show Git Commands #

Visual Studio Code provides a variety of shortcuts to simplify the use of Git commands. Some of the most helpful shortcuts include:

• Ctrl + Shift + G: This command opens the Git sidebar, which displays current Git status and allows the user to quickly access files, branches, and commits.
• Ctrl + Shift + P: This command opens the Command Palette, where Git commands can be entered directly.
• Ctrl + Enter: This command is used to commit changes quickly without having to navigate through the commit message box.
• Ctrl + Shift + E: This command is used to add files and changes to the staging area prior to committing.
• Ctrl + Shift + C: This command copies the current Git commit hash to the clipboard for easy referencing.

By utilizing these shortcuts, developers can streamline their Git workflow and save valuable time.

5. Navigate between Errors and Warnings #

VS Code shortcuts to navigate between errors and warnings come in handy to quickly jump to the next or previous error or warning in code.

Errors:

Use Shift+ F8 on Windows or Shift + Fn + F8 on Mac to go the previous error in your code. If you want to move to the next error, you can simply use the F8 key on Windows or Fn + F8 on Mac.

Warnings:

Use the shortcut Ctrl+ Shift + F8 on Windows or Cmd + Shift + F8 on Mac to go to the previous warning in your code. To move to the next warning, you can simply use the Ctrl + F8 key on Windows or Cmd + F8 on Mac.

💡 Dev Tip: Press Ctrl+Shift+M to display the PROBLEMS panel with a list of all current errors.

6. Shortcut for Terminal #

Depending on your operating system, use one of the following shortcuts to open a new terminal in VS Code.

• Windows users: Ctrl +` will open the terminal window.
• macOS users: ⌘ +` will open the terminal window.
• Linux: Ctrl+Shift+` will open the terminal window

7. Run the Selected Text in VS Code Terminal #

To run selected text in the VS Code terminal, you can use the following shortcut on Windows or Linux:

Ctrl + Shift + P (or Command + Shift + P on mac), then type "Run Selected Text in Active Terminal" and select it from the dropdown menu.

Alternatively, you can also achieve this by right-clicking on the selected text and choosing "Run Selected Text in Active Terminal" from the context menu.

This is a useful shortcut for developers who like to quickly test their code snippets or debug selected portions of their code in the terminal without having to copy and paste them manually.

8. Shortcut for Multi Cursor #

One of the most useful features in Visual Studio Code is Multi-Cursor Editing. This feature allows you to edit the same text in multiple places at the same time, saving you a lot of time and effort.

The shortcut key for Multi-Cursor Editing in Visual Studio Code is Ctrl+Alt+Up/Down. This shortcut will add extra cursors above or below the current cursor position.

If you want to add cursors to multiple locations at once, you can use the mouse by holding down the Alt key and clicking in the desired locations.

There are also a few other shortcuts you can use for Multi-Cursor Editing, such as Ctrl+Shift+L to select all occurrences of the current selection or Ctrl+Shift+Alt+Up/Down to add a cursor above and below the current position while also selecting the text.

In short, using the Multi-Cursor Editing feature will make editing in Visual Studio Code faster and more efficient.

9. Shortcut for Split-Diff Editor #

The Split-diff editor is a useful feature in Visual Studio Code that allows you to view the changes between two files, or even multiple versions of the same file. It's a great way to get an overview of what has changed between two different versions of your code.

The keyboard shortcut for this is Ctrl + Alt + M

10. Keyboard Shortcut Reference #

In VS Code, there are a variety of keyboard shortcuts that can be used to increase productivity during development. One of these shortcuts is Ctrl + K then Ctrl + S. This will open the Keyboard Shortcut Reference, which contains a searchable list of all available shortcuts and allows users to customize their own shortcuts. It's a great resource for those new to VS Code or those who want to improve their workflow. By memorizing and utilizing the available shortcuts, developers can save time and make their coding experience more efficient.

Conclusion #

Although these 10 shortcuts are nowhere near all the VS Code shortcuts available, it's a fairly comprehensive list that should be useful to most new and experienced developers. I hope this article has been helpful in getting you up to speed quickly with your VS Code development.

Vishal Pallerla

Developer Advocate, DevZero