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
1. CMD + P: Opens the palette to search for a file
(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
2. CMD + SHIFT + L: Add cursors to all matching selections
(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
3. CMD + D: Add cursor to next matching selection
(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
4. CMD + U: Undo last cursor operation
(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
5. CMD + L: Select current line.
(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
6. CTRL + G: Go to a specific line
(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.
7. CMD + K + W: Close all open editor tabs
(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
8. SHIFT + OPTION + A : Toggle block comment
(Windows: SHIFT + ALT + A, Linux: CTRL+SHIFT+A)
This shortcut also allows us to add a new block comment or toggle existing ones.
We enclose a piece of Javascript code with /* */ 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 + /)
9. CMD + OPTION + [ : Fold code block
(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 + ] )
10. OPTION + UP/DOWN : Move line up or down
(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
11. CTRL + ` : Open integrated terminal
(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
12. CMD + \ : Split editor view
(Windows/Linux: CTRL+)
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.
13. SHIFT + OPTION + F : Format document
(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.
14. OPTION + SHIFT + UP / DOWN : Duplicate selection up or down
(Windows/Linux: SHIFT+ALT+UP/DOWN)
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
15. CMD + B: Toggle Sidebar
(Windows/Linux: CTRL+B)
You can use this command to toggle the sidebar to make more space for your file view as and when needed.
Cherry on the cake
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 inshelland then selectShell Command: Install 'code' command in PATHfrom the options.
Summary
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.
I also share tips and tricks related to web development with Javascript and React on Twitter.
Come say hi 👋 . Let us connect 😁
Top comments (1)
Cool, I don't know how to live without shortcuts LOL
Thank you