Learning to code is famously, not easy. Aside from learning new languages, you're learning to navigate a whole new toolset that you've likely never even heard of. As a beginner, using VS Code, GitHub, and even Terminal can feel like having keys to a Ferrari but you have no clue where it's parked. Frustrating, right?
Learning to take advantage of shortcuts and extensions helps streamline your process and may even result in better coding! Below I’ll be sharing some of the VS Code shortcuts I’ve found most useful as a new developer.
Full list of VS Code shortcuts: Windows/Mac.
Show/Hide Terminal
Mac: Control + `
Windows: Ctrl + `
Discovering this shortcut was what made me want to look for more shortcuts to increase my productivity. The first time I ever opened VS Code, the integrated terminal was already open but having to look for it the next time took me a few minutes.
Show/Hide Sidebar
Mac: Command + b
Windows: Ctrl + b
This shortcut is mostly a preference, you can definitely toggle the sidebar by simply clicking any of the buttons on the sidebar but I prefer not leaving my keyboard whenever possible.
Split Editor
Mac: Command + \
Windows: Ctrl + \
When writing functions that rely on syntax used in the HTML file, it's a huge time saver to be able to see both files at the same time! Using split editor not only helps speed up my coding, but also stops me from getting distracted by flipping through different tabs. Keep in mind you can add multiple tabs, my current set up for most projects is 3 editors: the ReadMe file, Javascript file, and an HTML or CSS file.
Word Wrap
Mac: Option + z
Windows: Alt + z
Another very easy fix to an annoying newbie issue. Typing out pseudocode really helps me to problem solve and decide what to code next. Doing so (especially with split editors) can get messy quickly, using word wrap solves this pesky nuisance! Don't quote me on this but I believe you only need to set this option once, and it should stick as your default setting.
Find and Replace
Mac: Command + f
Windows: Ctrl + f
This one took me a surprising amount of time to discover.. it's my go-to for skimming articles and when using word editors, but I didn't automatically assume it would be a function of a code editor! Incredibly helpful for typos or renaming multiple elements at once, as shown in the gif above.
Multiple cursors
Mac: Option + Right-click
Windows: Alt + Right-click
Being able to add multiple cursors is an invaluable tool! Sometimes find and replace isn't exactly what you need, if you're looking to make just a few h2 elements into h3, you wouldn't want to replace all of them but you can highlight the ones you need and replace the select few at the same time.
Duplicate Line
Mac: Shift + Option + up/down
Windows: Shift + Ctrl + up/down
When you're writing code that is repetitive, or adding multiple list items as shown above, being able to duplicate a line is so nice! It can help prevent syntax errors or simply save your fingers from extra typing. As long as your cursor is on the line you want to duplicate, this shortcut will take care of the rest.
Zen Mode
Mac: Command + k then z
Windows: Ctrl + k then z
Zen mode removes all distractions from your editor and shows you your code full screen (including any split editors you might have). I've found this useful when I'm really trying to focus or debug tricky code. To exit zen mode, simply hit ESC.
Open shortcuts
Mac: Command + k then Command + s
Windows: Ctrl + k then Ctrl + s
Finally, if you want to see all of the shortcuts available in VS Code and don't want to go searching for the PDFs (linked here) you can simply use this command within the program and browse what's available to you! You can even edit the pre-programmed shortcuts and add your own.
Top comments (1)
Good list!
And, the one I probably use more than any others: F1 to open the command bar. You can then start typing to search for almost any command there is in VS Code.