VS Code is one of the most used code editors among developers, and it has some amazing features to help developers increase their coding speed.
So in this article, I'm going to go through 20 Visual Studio Code shortcuts that I find the most convenient for me when I'm coding. No worries if it doesn't apply to you, hopefully, there will be at least a couple of shortcuts you can learn and apply when you next open VS Code. Speaking of opening...
1. Opening and closing sidebar
The sidebar on VS code can be opened and closed without clicking on the left-hand side tab using the following VS shortcuts.
Mac — Command + B
Windows — Ctrl + B
Ubuntu — Ctrl + B
Closing the sidebar is very useful when you are in the split editor mode.
2. Select word
This is used to select the word where your cursor currently is in VS code studio.
Mac — Command + D
Windows — Ctrl + D
Ubuntu — Ctrl + D
If you keep pressing the shortcut more than once, you can keep selecting the same occurrence of the word.
Content for your skill and soul:
Here are the best 29 VS Code extensions to help improve your productivity
7 Ways ChatGPT Can Help Developers
3. Split Editor
A split editor (a side-by-side editor) is often useful if you need to compare two files or refer to another file while making changes to a different file in Visual Code Studio.
Mac — Command + \ or 2,3,4
Windows — Shift + Alt + \ or 2,3,4
Ubuntu — Shift + Alt + \ or 2,3,4
4. Code folding
If the file is too long, we might need to fold and unfold blocks of code to understand the code better.
This can be done using the following VS code shortcut:
Folding the innermost uncollapsed region at the cursor:
Windows/Ubuntu — Ctrl + Shift + [
Mac — Command+ Option + [
Unfolding the collapsed region at the cursor:
Windows/Ubuntu — Ctrl + Shift + ]
Mac — Command+ Option + ]
Wanna know about the beginning of React? Watch React.js: The Documentary here.
Do you love React and are looking for React developer roles? Sign up here.
5. Copy line up/down
If you need to copy the current line to the line above or below, the following VS shortcut can be used.
Mac — Shift + Option + Up/Down
Windows — Shift + Alt + Up/Down
Ubuntu — Ctrl + Shift + Alt + Up/Down
6. Code formatting
Code formatting allows indenting the code based on the rules already set up in the editor.
Windows — Shift + Alt + F
Mac — Shift + Option + F
Ubuntu — Ctrl + Shift + I
7. Trim trailing white spaces
This will help get rid of white spaces at the beginning or end of the line.
You can change your VS code properties to trim whitespaces automatically in your settings by modifying the user settings tab like below:
Preferences > Settings > User Settings tab
Add a new "files.trimTrailingWhitespace": true setting to the User Settings documents if it's not already there. Afterwards, when you save a file, this will be automatically applied, and the whitespaces will be removed.
8. Join line
This Visual Code shortcut allows you to join the selected set of lines into a single line.
Mac — Ctrl + J
Ubuntu, Windows — Open keyboard shortcuts from
File>Preferences>Keyboard shortcuts, and bindeditor.action.joinLinesto a shortcut you prefer.
9. Quick file open
Mac — Command + P
Windows/Ubuntu — Ctrl + P
10. Command Palette
This code shortcut is one of the most important key combinations to know in VS Code. You can access all available commands based on your current context using:
Windows/Ubuntu: Ctrl +Shift + P
Mac: Command + Shift + P
11. Toggle terminal
It’s common to use several terminals when developing a web application, and you can easily toggle between them using:
Mac — Command+backtick (Command+`)
Windows/Ubuntu — Ctrl+backtick (Ctrl+`)
12. Switch Tabs
This shortcut allows you to switch between the sections you’ve split.
Mac — Command+1, Command+2, Command+3
Windows/Ubuntu — Ctrl+1, Ctrl+2, Ctrl+3
13. Select current line
With this VS code shortcut, you select the current line where your cursor is at.
Mac — Command + L
Windows/Ubuntu — Ctrl + L
14. Delete line
Mac — Command + Shift + K
Windows/Ubuntu — Ctrl + Shift + K
15. Move line
Mac — Option + Up/Down arrow
Windows/Ubuntu — Alt + Up/Down arrow
16. Find word/phrase
If you need to find from the current file
Mac — Command + F
Windows/Ubuntu — Ctrl + F
If you need to find from the entire project
Mac — Command+Shift + F
Windows/Ubuntu — Ctrl+Shidt + F
17. Peek Definition
The Peek Definition feature allows you to view and edit the source code of a referenced symbol right on the spot.
Mac — Option + F12
Windows/Ubuntu — Alt + F12
18. Rename
This will allow you to rename a component and replace the subsequent occurrences of the component name as well.
Mac/Windows/Ubuntu — F2
19. Multi cursor selection
VS Code supports multiple cursors for fast simultaneous edits. You can add secondary cursors using:
Mac — Option + Click
Windows/Ubuntu — Alt + Click
20. Duplicate line
You can make the duplications of the same line using:
Mac — Command + Shift + D
Windows/Ubuntu — Ctrl + Shift + D
Conclusion
As I mentioned, there are a large number of shortcuts we can use with VS Code. However, the above list includes some must-know shortcuts for every developer who works with VS Code.
I hope you found some exciting shortcuts in this list to make your coding more efficient, and if there are any other tips of your own, don't forget to share them in the comments.
Thanks for reading ✌️
