I decided to write a quick post about helpful Visual Studio Code keyboard shortcuts. I learned some of these shortly after starting my journey into programming. Some of them I learned while doing some research for this blog post, which was my hope to motivate myself to learn more shortcuts. It's great how a little key binding can really boost your productivity and fun while coding. Many of these will be familiar, but they are techniques I wish I had known on day one!
Show Command Palette
Mac: Shift + ⌘ + P or F1
Windows: Ctrl + Shift + P or F1
This command provides quick access to the Command Palette. Here you will have a list of all the default commands available and also for any extensions you have added. Try it out and stop reading here unless you want to see my favorites!
Toggle line comment
Mac: ⌘ + /
Windows: Ctrl + /
One of the first commands I learned that will automatically comment out (or uncomment) lines of code based on which file type you are editing. Select all lines you want comments toggled. It will also comment the line the cursor is on without selection.
Add selection to next Find match
Mac: ⌘ + D
Windows: Ctrl + D
I find myself using this one a lot! Select a feature that you want to find duplicates of. Each time the command is entered it will continue to add selection and cursor to the next match. Very useful for editing repeating code like variables all at once!
Select all occurrences of current selection
Mac: ⌘ + shift + L
Windows: Ctrl + Shift + L
Similar to above except it selects all matching occurrences all at once instead of one by one.
Toggle Sidebar visibility
Mac: ⌘ + B
Windows: Ctrl + B
Quick command if you want to hide your sidebar display and have a larger view of your editing area.
Zen Mode
Mac: ⌘ + K then Z
Windows: Ctrl + K then Z
Remove distractions and only display your code in full screen. hitting esc + esc exits.
Quick Open, Go to File…
Mac: ⌘ + P
Windows: Ctrl + P
Instead of searching through your file explorer this command opens up a search bar to quickly find the file your want to navigate to without having to use your mouse.
Navigate editor group history
macOS: control + shift + tab
Windows: ctrl + shift + tab
Quickly navigate through files that you have tabs open for.
Access Keyboard Shortcuts
Mac: ⌘K ⌘S
Windows: Ctrl + K then Ctrl + S
Here you can see and search all the keyboard shortcuts, and also change or add new bindings.
Wrap with Abbreviation
Unbound by default
This one is not bound by default but it seems like it could come in handy! In keyboard short cuts search Emmet :Wrap with Abbreviation. I bound it to ⌥ + w. This will select the code block your cursor is on and you can wrap an HTML tag around the block, for example. Pretty neat!
Format File with Prettier extension
Mac: option + shift + F
Windows: Shift + Alt + F
I find using the Prettier extension very useful for formatting JavaScript and making it easier to read (pretty, if you will). As a beginner its nice to focus on writing code that works without having to worry as much about formatting.
Add additional cursor
Mac: option + mouse click
Windows: Alt + mouse click
Adds as many additional cursors as you like to edit multiple lines at once!
PDFs for VSCode keyboard shortcuts
This was just a short list of keyboard shortcuts that I have found handy. Here's are some links to some easy to read documents with more. Try some out, you might find a new favorite!
Top comments (0)