No need for a long intro, it's pretty simple: make better programs by focusing on the program instead of the editor.
So whether it's instantly refactoring 50 different lines of code at the same time, finding issues, or changing your view by adding and closing panels, these VS Code shortcuts will help you with navigating your environment rapidly, and jumping around your code with ease.
You might also find my previous articles in this series useful:
Add Cursor to All Matching
Select and edit multiple instances of the same text simultaneously
Maybe this won't increase your code quality, but it'll definitely increase the amount of code you modify at a time, so no one will have the time to even review your code.
- Linux / Windows:
Ctrl + Shift + L - Mac:
Cmd + Shift + L
Next Issue In Project
Instantly navigate to code marked with an issue across your project
VS Code is like your guardian angel. It constantly keeps watch over your spaghetti code and keeps a list of why you should've considered a different career. If you wanna make the voices go away quickly, try this shortcut!
- Linux / Windows / Mac:
F8
Next Issue In File
Instantly navigate to code marked with an issue but only in the current file
The previous shortcut was great, but it turns out there are wayyy too many issues across your project to even begin to hope to fix them. Most of them are warnings either way so who cares? Why not just stick to the current file!
- Linux / Windows:
Alt + F8 - Mac:
Opt + F8
Show Code Actions Menu
Show code actions in context to the code your cursor is on
That little menu in VS Code can have so many wonderful refactoring options. It's there to make your life easier. Also, auto imports. Honestly, mostly auto imports.
- Linux / Windows:
Ctrl + Dot - Mac:
Cmd + Dot
Toggle Left Sidebar
Show or hide the left (or primary) side bar
When your wide screen is not wide enough to see that 3000 character email validation regex, you can hide the side bar completely and see if that helps to understand it. Still no? Well it's a cool shortcut either way.
- Linux / Windows:
Ctrl + B - Mac:
Cmd + B
Toggle Right Panel
Show or hide the right (secondary) side bar
Indeed, there is an entirely hidden section on the right. My mind was blown too when I first discovered this. Now you put your debugger there and see every single variable in your application at once!
- Linux / Windows:
Ctrl + Alt + B - Mac:
Cmd + Opt + B
Toggle File Explorer Panel
Focus on the file explorer panel, then you can navigate with the arrow keys
This one really makes you regret the fact that you nested your components 10 levels deep, doesn't it? Well, at least the icons are pretty.
- Linux / Windows:
Ctrl + Shift + E - Mac:
Cmd + Shift + E
Find Symbol in File
Use fuzzy search to list and find symbols like functions and variables (useful for finding a constructor quickly!)
Why answer the question of why you have 100 methods in your class? This will never come back to haunt you, at least, not now that you know this shortcut!
- Linux / Windows:
Ctrl + Shift + O - Mac:
Cmd + Shift + O
Go to Definition of Highlighted Symbol
Go to definition of the symbol under the cursor. Useful when you're working with unfamiliar code or libraries
Using an API from an npm package abandoned 3 years ago but still has 300 million weekly downloads? Sometimes you gotta get your hands dirty and dig in a bit.
- Linux / Windows / Mac:
F12
Show Peek of Definition of Highlighted Symbol
Show definition of the symbol under the cursor in a popup window
Got commitment issues? Sneak a peek at the party from a little window like a true introvert.
- Linux / Windows:
Ctrl + Shift + F12 - Mac:
Cmd + Shift + F12
Conclusion
With these shortcuts, you'll find yourself getting to the important bits of your code quicker, and with more control over them.
Check out my other articles for even more handy shortcuts:
Top comments (2)
thanks for the helpful article, especially thanks for the gifs
Cmd + d is, for me, the most used one.