A short list of some helpful VS Code keyboard short cuts.

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!

MacOS

Windows