VS Code has become one of the most popular and default text editors of developers.
When I started programming, I was writing codes slow and I thought maybe I didn’t have enough programming knowledge to help boost my coding speed.
Fast forward I have learned various programming concepts like Design patterns, Object-oriented programming, functional programming and many more.
My programming skills and my ability to understand code has increased tremendously.
However, at some point, I realized I was using the mouse to do most of the tasks the keyboard could have completed in split seconds. I decided to download a Typing game to improve my typing skills.
My typing skills have also improved and I can now type around 75 words per minute which are not bad.
I watch a lot of tutorials online and one thing I realized was those programmers who were better than me were using their keyboard to perform almost every task I was using the mouse to do.
Later, I decided to learn at least 20 different shortcuts that I can utilize in VS Code since I always code my applications in Visual Studio Code.
Now I can boldly say my overall programming productivity has improved incredibly and am proud I made the right decisions.
In this article, am going to list 21 VS Code shortcuts you can learn today to improve your productivity and limit the number of times you use the mouse as a programmer.
Some of these shortcuts do not only apply to VS Code but you can also use them in various editors, Google Docs, Microsoft Word, Excel and many more.
To improve your productivity as a programmer you can also check these articles:
- Powerful VSCode Tips And Tricks For Python Development
- 25 VS Code Productivity Tips and Speed Hacks
- Top 10 Best VS Code Extensions for React Developers
Open Command Palette
This shortcut is probably one of the most important key combinations to know if you are new to the VS Code editor.
The command palette allows you to access every functionality, shortcut, command, and configuration option in VS Code.
You can bring up the command palette with the following key combinations:
- Windows – Ctrl + P
- Mac – Command + P
Open and Close the Sidebar
Shortcut number two is to toggle your sidebar if you need more screen space to work.
The sidebar shows the explorer tab where you can see the current files or workspaces you are working on.
Sometimes I close the sidebar when I need more space to write long code to prevent them from wrapping to the next line.
Here are the commands to toggle the sidebar.
- Windows – Ctrl + B
- Mac – Command + B
Toggle Comment Line
Traditionally, your cursor must be at the beginning of a line of code before you write // to transform it to comment.
VS Code provides an easier alternative to comment out a line of code. With this shortcut, you can toggle the comment line regardless of where your cursor is on the line.
Below are the shortcuts to toggle a line of code on both Windows and Mac.
- Windows – Ctrl + /
- Mac – Command + /
Toggle Block Comment
Let’s say you want to comment out a block of code when you are testing new codes or debugging errors, there is no need to manually put /* at the beginning of the code block and */ at the end of the block of code.
VS Code can speed up the process by allowing you to turn single or multiple lines of code into comments at once.
To turn single or multiple lines of code to comment, you need to select that line or lines of code and use the following commands
- Windows – Ctrl + /
- Mac – Command + /
- Windows – Shift + Alt + A
- Mac – Shift + OPTION + A
VS Code has an in-built terminal where you can run all your command like running your servers(backend), running your apps(frontend), changing directories (cd), installing packages and many more.
I always leave the terminal open when am building complex web applications since I often install packages and also check the terminal to see if my running processes have crashed.
If you also need more space to work with then you can close the terminal.
Here are the key combinations to toggle the terminal on both Windows and Mac:
- Windows – Ctrl + `
- Mac – Command + `
Open User Settings
Usually, when you want to change some configurations in settings, you click on the cogwheel at the bottom right corner or navigate to the file menu –> Preferences –> Settings.
A simpler alternative is to use a shortcut instead of using the mouse to make the necessary clicks to reach settings before making the changes you want.
You can use the shortcuts below to bring up the settings and then make the necessary configurations.
With VS Code, you can change the settings in the visual editor setting or the setting’s JSON file.
Let’s say you want to increase the font size to make the characters more visible, you can use the key combinations below to open settings then search for font size and change it to your desired number and the changes will take immediate effect.
- Windows – Ctrl + ,
- Mac – Command + ,
Move Line Up and Down
Normally, you cut and paste or copy and paste a line of code when you want to move it up or down.
When you copy and paste a line of code then you need to delete the original line.
I know you usually cut and paste the line of code since it’s a better way of doing it but there is a better and faster way of moving a code line up and down.
You can use the following commands to move a line of code down or up instead of copying and pasting it before deleting the original.
- Windows – Alt + ARROW / DOWN ARROW
- Mac – OPTION + ARROW / DOWN ARROW
Tab through Open files
This shortcut is quite useful when you want to quickly move from one tab to another without using the mouse.
Mostly when you are building applications, you open multiple files to work with and you use the mouse to click on a particular file when you want to edit it.
VS Code provides a simpler way to move between tabs without using the mouse.
Below are the commands to move from tab to tab easily without touching the mouse.
- Windows – Ctrl + Tab
- Mac – Command + Tab
Move file to Split Window
VS Code allows you split-view easily when editing your files.
Normally, when you want to split-view you use your mouse to drag the file over to the right to leverage the split editor.
The split editor can be customized into grids and this feature is really helpful when you are comparing and editing multiple files at the same time.
Here are the commands to leverage the split editor on both Windows and Mac:
- Windows – Ctrl + \
- Mac – Command + \
In the past when I didn’t know about this shortcut, I usually use my mouse when I want to close a particular file by going up to the File tab and clicking on the X icon.
Currently, I don’t touch the mouse when I want to close any tab. While in the file you want to close, use the following commands to quickly close the file without using the mouse.
- Windows – Ctrl + W
- Mac – Command + W
Copy One Line Up and Down
We are all guilty of copying and pasting a line of code when we want to duplicate it.
You can use the key combinations below to duplicate a line of code when you want to copy it.
You only need to make sure your cursor is on the line of code then use the commands below to duplicate it up or down.
- Windows – Shift + Alt + ARROW / DOWN ARROW
- Mac – Shift + OPTION +ARROW / DOWN ARROW
Duplicate a Selected Code Block Up and Down
Let’s say you want to copy a selected block of code either up or down, the first option you will think about is to copy and paste that block of code.
Even though that works but there is a better and faster way of doing it with the keyboard.
To duplicate a selected block of code up and down use the commands below on Windows and Mac.
- Windows – ALT + SHIFT + UP ARROW / DOWN ARROW
- Mac – OPTION + SHIFT + UP ARROW / DOWN ARROW
Delete previous word
To delete a previous word, you can use this shortcut to prevent accidental deletion when you hold down the backspace key.
This is really useful when you are busily typing then you realize the previous word you typed has some typo and you want to delete it.
The key combinations below allow you to easily delete a typo when typing.
- Windows – Ctrl + Backspace
- Mac – Command + Backspace
One of my favourite features of VS Code is the ability to search through a particular file for a keyword or symbol.
To find a particular keyword in VS Code, you need to select the keyword and use the shortcut command + F to open the Search and replace box.
You can also jump through the different occurrences of that keyword by pressing the enter key.
You can also replace the searched keyword with a different keyword in the replace field and VS Code will automatically replace all the various occurrences of the searched keyword.
- Windows – (Ctrl + F , Ctrl + H)
- Mac – (Command + F , Command + H)
Global Search/Replace file
The global search/replace feature allows you to search and replace a particular keyword throughout the project files or workspace.
To search through all your project files, you can either use the search icon or use the shortcuts below.
Then type the keyword in the search field and VS Code will automatically show all the files that have that particular keyword.
You can open and edit the different files that contain the keyword you searched for.
This can save you a lot of time when you are debugging your code since you don’t have to manually open each file to check whether it contains that keyword.
- Windows – Ctrl + Shift + F
- Mac – Command + Shift + F
Copy, Cut and Paste Code
I know you are smiling because we’ve reached the commands you are familiar with.
These three commands copy, cut and paste are at your fingertips since you use them everywhere ranging from your Desktop, Google Docs, Microsoft Word, and many more.
We are all guilty of copying and pasting code snippets from StackOverflow or blogs into our text editor.
Here are the 3 shortcuts you can use to copy and paste; cut and paste code snippets.
- Windows – (Ctrl + c, Ctrl + x, Ctrl + v)
- Mac – (Command + c, Command + x, Command + v)
Another useful feature of VS Code is the ability to place the cursor at multiple positions.
Let’s say instead of using a paragraph tag, you used spans and later realized you made a mistake.
One noticeable option you can think of is to use Ctrl + F to find and replace all the spans with a paragraph tag instead. This will work but the downside is it will also replace the spans you don’t want to change.
This is when multiple cursors come into play, you simply hold the Alt or Option key then left click at the different positions and edit the spans to paragraph tags.
- Windows – Alt + Click
- Mac – Option + Click
Sometimes VS Code can become slow when you are building complex applications where you have multiple software running at the same time (VS Code for the code, Postman for making HTTP requests, MongoDB compass for the database, browser for making some research and so on).
When you are writing code and you have multiple tabs opened in Chrome then know that your PC is going to run slow since Chrome out of the box consumes a lot of memory.
Let’s say you also want to know the various extensions that are eating up your memory in VS Code you can use the shortcut below to bring up the Task Manager.
From the Task Manager, you can see all the various applications and scripts eating up your memory and CPU.
- Windows – Ctrl + Alt + Delete
- Mac – Ctrl + Option + Delete
Re-open a Closed Tab
When you’re working on a complex project with multiple files opened at the same time, it might be frustrating when you accidentally close a tab and have to go back to the menu to look for it again.
Well, don’t panic VS Code has a shortcut to re-open a recently closed tab, you can also open the closed tabs before the recently closed one.
Below are the commands to re-open the recently closed tabs in VS Code.
- Windows – Ctrl + Shift + Tab
- Mac – Command + Shift + Tab
Move to the Beginning of a File
This shortcut is very useful when you are working on a huge file containing thousands of lines of code and you want to scroll to the beginning of the file.
Instead of manually scrolling to the beginning of the file you can use the shortcuts below to automatically scroll to the beginning of the file.
- Windows – Ctrl + Home
- Mac – Command + Home
Move to the End of a File
When you are working on a complex file containing thousands of lines of code and you want to scroll to the end of the file to make some changes.
Instead of manually scrolling to the end of the file using your mouse or the down arrow key on the keyboard, you can use the shortcut below to automatically scroll to the end of the file without any hustle.
- Windows – Ctrl + End
- Mac – Command + End
Conclusion on the VS code Shortcuts
As programmers, we need to improve our skills daily. New technologies are evolving and it’s our job to keep pace with the new innovations in order to stay relevant in the market.
One particular skill that you can master to improve your productivity is to learn how to always use the keyboard rather than the mouse.
Learning how to type very fast and accurate with the keyboard is just like learning how to play a musical instrument.
You can also learn the top 20 keyboard shortcuts to further increase your typing skills and become more productive when writing code in VS Code.
Learning how to properly use the keyboard can save you a lot of time since you won’t touch the mouse because the keyboard can also perform the various actions the mouse can do.
These are the top 21 VS Code shortcuts you can master as a programmer to improve your productivity when building projects.