Best VS Code Shortcuts and Productivity Hacks for 2023

Visual Studio Code (VS Code) is a robust, open-source code editor developed by Microsoft. It supports multiple programming languages and offers features like syntax highlighting, code completion, and debugging, which ease the process of writing and testing code. 

VS Code’s popularity arises from its ability to handle various software development activities such as web development, app development, and data science. Furthermore, its flexibility via plugins and extensions enables customization and optimization to fit unique project needs.

First and foremost, keeping track of official VS Code documentation for finding the updated VS Code shortcuts and tips is crucial; this can help you stay updated with the helpful practices you can follow to boost your productivity.

Another critical part of properly utilizing VS Code is learning how to navigate the UI. For this,  you need to understand the various aspects of the interface, such as the editor, sidebar, and status bar, and know how to use VS code keyboard shortcuts (which we will go over in more detail later).

Additionally, you can use features like IntelliSense for smart completions based on variable types, function definitions, and imported modules to write code more efficiently.

Also, read: Looking for Software Developer Jobs? Learn to Write Clean Code First

Each project in VS Code can be tailored according to your own requirements. You can customize most things, like

• Add your preferred color scheme
• Alter the text size. 
• Reorganize the interface’s structure.

Let’s dive in and learn about shortcuts and productivity hacks in detail!

The almighty command palette

Command palette is a powerful tool that allows you to access various commands and settings in VS Code quickly and easily. Press Ctrl + Shift + P to navigate through the command palette and perform the regular and complex functions. You can instantly access a variety of bindings and Visual Studio Code shortcuts that will make your workflow more effective by utilizing the command palette.

For example, you can use the command palette to open recently opened files without navigating through multiple directories in the file explorer. Additionally, you can use the command palette to start typing a file name and quickly find it within your project. This practice can save you time and make your work more streamlined.

Use VS Code keyboard shortcuts  

VS Code Shortcuts Keyboard Shortcuts

VS Code has a wide range of keyboard shortcuts to help you explore, modify, and organize your code more effectively. 

Using the mouse to perform regular tasks is appealing due to VS Code’s enticing GUI. But using the keyboard to perform the same functions is recommended because it is faster, efficient, and having your hands on the keyboard more than the mouse makes you a cool developer that everybody wants to hang around.

To traverse around the entire VS code, utilize the command palette (Ctrl + Shift + P). This can help you leave the mouse and rely more on the keyboard because everything can be managed via the single navigation bar in VS Code.

Here are the prominent VS Code keyboard shortcuts.

Best VS Code extensions to increase productivity

VS Code has a large library of extensions that can add new functionality to the editor, such as language support, debugging tools, and productivity enhancements. These add-ons transform VS Code into a robust IDE.

Quokka VS Code extension

Quokka VS code extension

Quokka is a real-time coding tool that lets developers see the outcomes of their code as they type it. It is very beneficial for testing code, and it can save developers a significant amount of time. Quokka is remarkable because it executes your JavaScript or TypeScript code in the background and then inserts the output straight into your editor.

Auto Rename Tag VS Code extension

Auto Rename Tag VS Code extension

This extension enables developers to rename HTML and XML document tags quickly. It saves time and decreases the possibility of errors. When you update the beginning tag, this plugin will automatically rename the closing tag, and it can function in languages other than HTML.

Also, read: Top 21 HTML Interview Questions and Answers for 2023

JS Doc Extension of VS Code 

This extension assists developers in inserting JSDoc comments into their JavaScript code. It includes a set of templates and VS Code shortcuts to help you document code faster and more efficiently. The link tag can be used to link to other symbols in your source code.

Also, read: 10 JavaScript Interview Questions and Answers You Must Know

Remote SSH VS code extension

Remote SSH VS code extension

Remote SSH helps programmers access servers and containers from a remote location. It is beneficial while working on projects hosted on distant servers or containers.

Paste as JSON VS code extension 

Paste as JSON VS code extension

This plugin makes it simple for developers to insert JSON data into their programs. It formats the JSON automatically, making it easier to read and comprehend.

Integrated terminal 

The integrated terminal in Visual Studio Code (VS Code) is a powerful feature that enables developers to perform command-line commands directly from the VS Code interface. It can be used to compile code, run tests, and manage version control systems such as Git.

One of the primary advantages of the integrated terminal is that it allows developers to work on both code and command-line operations in the same environment rather than jumping between distinct apps. Use VS Code shortcut: Ctrl + ~ or click on View → Terminal to open the integrated terminal.

To start a new terminal, use the shortcut: Ctrl + Shift + ~, and to concentrate on the terminal, use Ctrl + ~. One lesser-known approach is to divide the terminal into different panes using Ctrl + Shift + 5 and navigate to different panes using Ctrl + > or <.

Multiple terminals can also be launched simultaneously, allowing you to perform different commands concurrently. Overall, the integrated terminal in VS Code is a strong and adaptable tool that may significantly improve your development process.

Git Integration 

Git is a version control system that enables developers to monitor changes to their code over time and interact with other developers working on the same codebase. It enables developers to generate and maintain various versions of code, known as branches, and merge them once they are complete.

Visual Studio Code Git integration allows developers to do Git tasks such as committing, pushing, pulling, and branching within the editor. For example, Git integration in VS Code allows developers to manage their code repositories within the editor, speeding the development process and boosting team cooperation.

Some handy VS Code shortcuts for Git integration include “CTRL+SHIFT+G” (or “CMD+SHIFT+G” on Mac) to access the Source Control panel and “CTRL+SHIFT+9” (or “CMD+SHIFT+9” on Mac) to toggle the Git lens on the left sidebar. 

One lesser-known technique is that Git integration can be used to generate and switch between different branches, making it simple to work on numerous features or bug fixes simultaneously.

Use the VS Code debugger effectively

The Visual Studio Code debugger is a powerful tool that can help you increase productivity by allowing you to analyze and debug your code easily. One of the key features of the debugger is the ability to set breakpoints, which pause the execution of your code at specific lines and allow you to inspect variables.

To address the topic, “How to debug effectively in Visual Studio,” here are some strategies you can use.

• Use “breakpoints” to halt code execution and analyze variables at specific lines. To set a breakpoint, click to the left of the line number in the editor or press F9 while the cursor is on the line.
• To keep track of individual variables during debugging, use the “Watch” window: press Ctrl + Shift + D (Windows/Linux) or Cmd + Shift + D (macOS) to launch the “Watch” window and add variables to it.
• To understand the execution path of your code, open the “Call Stack” window by pressing Ctrl + Shift + C (Windows/Linux) or Cmd + Shift + C (macOS).
• Use “Step Over” to run the current line of code and advance to the next by clicking F10.
• By pressing F11, you can jump into a function or method and debug it line by line (Step Into). Press Shift + F11 to quit the current function or method and return to the calling function (Step Out). F5 will restart the execution of your code (Continue). 
• To switch between debugging environments, access “Debug” settings by pressing Ctrl + Shift + D (Windows/Linux) or Cmd + Shift + D (Mac) (macOS). 
• Depending on the language, you can use the “threads” command to display all threads and the “thread” command to switch to a single thread, and then use all other commands as usual to debug multi-threaded debugging.

Incorporating productivity hacks into your daily tasks can be a game changer for you as a coder. You can get the most out of the editor by customizing your workspace, using and creating VS Code shortcuts, and employing extensions. The tips and tricks above can help you become more productive with VS Code. 

If you want to take your software development career to the next level, we can help you. We connect top developer brains like you with remote jobs in top US-based companies. Click on the Apply for Jobs button to know more. 

Join a network of the world's best developers and get long-term remote software jobs with better compensation and career growth.

Apply for Jobs