VSCode is one of the most popular editors for web development. When writing code, we often require certain formatting actions, and a lot of them are supported by VSCode itself. While most actions can be found from Menu options, having hands-on keyboard shortcuts can help improve your coding speed by a lot.
Here is a list of some shortcuts that I have been using for a while and found to be really useful.
Default shortcuts are for Mac, while shortcuts for Windows and Linux are mentioned below for each command
(Windows/Linux: CTRL + P)
Navigating through files is one of the most common options and this command can come in pretty handy. You can type the name of the file in the search box and select the file by clicking or by pressing enter on the search result to open the file
(Windows/Linux: CTRL + SHIFT + L)
One of my favorite features of VSCode is multi cursors. They allow you to replace text or append more text without copy-pasting or requiring you to change it one at a time.
Using this command, you can add cursors to all matching selections in the document
(Windows/Linux: CTRL + D)
Like the above command, this is also used to add cursors but with this, you can add the cursor to the next matching selection. This is especially helpful when you don't want to select all occurrences together
(Windows/Linux: CTRL + U)
If you need to undo cursor selection in a case where you selected more cursors than required or reset the cursor to a previous position, you can use this command to undo the last cursor action
(Windows/Linux: CTRL + L)
Often we use mouse drag to select the text, but if we want to select entire lines, we can use this command
(Windows/Linux: CTRL + G)
We can navigate to a specific line of the document by using this simple command and typing the line number.
This is especially helpful in situations when error stack traces provide us the line number of the file and our file is large.
(Windows/Linux: CTRL + K + W)
This command is useful when we want to clear all tabs.
Often while debugging or developing, I have opened many tabs and when I want to change the context or start fresh, this command comes in very handy
(Windows: SHIFT + ALT + A, Linux: CTRL+SHIFT+A)
This shortcut also allows us to add a new block comment or toggle existing ones.
/* */ to add a block comment. However, with this shortcut, we can add or remove a block comment for the selected code block or add new ones.
Line comments can be toggled with
CMD + / (Windows/Linux: CTRL + /)
(Windows/Linux: CTRL + SHIFT + [ )
This command is especially useful when we want to focus on a specific area of the code and hence ignore some code blocks. This folds the block closest to the cursor.
You can unfold the code block with
CMD + OPTION + ] (Windows/Linux: CTRL + SHIFT + ] )
(Windows/Linux: ALT + UP/DOWN)
When you want to move a piece of code, for example, a variable declaration either up or down, you cut and paste it to the appropriate place but if the readjustment is for a few lines you can use this command to move the current line/selection up or down
(Windows/Linux: CTRL+ `)
One of the most amazing features of VSCode is that it supports an integrated terminal which you can use just like a normal terminal and to run code or perform other operations. This command helps you open the terminal when you need it
You can split your editor view to open multiple files together.
This is especially helpful when you want to refer to content from a file while coding in another.
(Windows: SHIFT+ALT+F, Linux: CTRL+SHIFT+I)
Often we have extensions enabled or settings configured to format documents on save but sometimes we like to control when we want to format the document. This is where this command comes in.
It allows us to format the current document according to the configured settings.
Using this command you can duplicate the selected code either above or below the current code.
I love to use this when some functions are almost identical except for some small changes which I make after duplicating the previous implementation
You can use this command to toggle the sidebar to make more space for your file view as and when needed.
code . : Open VSCode from the terminal
Although this isn't a keyboard shortcut, it is extremely useful when you are working with the terminal and want to open a directory in VSCode
P.S. If this isn't configured yet, you can do so from VSCode by open command palette with
CMD+SHIFT+Pand type in
shelland then select
Shell Command: Install 'code' command in PATHfrom the options.
In this article, I covered some of the common, uncommon, and useful shortcuts.
There are other shortcuts too which are useful like
CMD+SHIFT+F for search,
CMD+SHIFT+P for showing command palette,
CMD+/ for toggling line comment, etc.
Thank you for reading
If you found this article helpful, do like and share this with your colleagues and friends. If you have any suggestions, please feel free to add them in the comments.
Come say hi 👋 . Let us connect 😁