The most useful keyboard shortcuts in VS Code

Melinda Diaz

Oct 8, 2020·4 min read

Programming requires a lot of typing, but if you’re using Visual Studio Code as your editor, there are some really great keyboard shortcuts built in that can make your coding much more efficient.

*I’ll be showing the mac shortcuts here, but for windows users, just replace the ⌘ with Ctrl.

To look at all the options VS code has to offer, there’s actually a keyboard shortcut to see all the keyboard shortcuts —

see keyboard shortcuts:     ⌘K ⌘S

…and you get:

Whoa! There are so many…you can read through them all if you’re into that kind of thing- or just keep reading this post that lists the best ones for you.

Coding Shortcuts

1. Need to delete an entire line? No need to highlight it, just put your text cursor anywhere on the line:

delete entire line:   shift  ⌘  K

2. Need to move an entire line up or down? Again, no highlighting necessary, put the cursor anywhere on the line:

move a line up:      option ↑    
move a line down:    option ↓

3. Need to indent a line or an entire block or your code? (You’ll need to highlight the multiple-line block to execute this shortcut, but not a single line)

indent a line or block left:    ⌘  [
indent a line or block right:   ⌘  ]

4. Need to change multiple matching snippets? (*for this one, keep the ⌘ key held down, and hit D until all the snippets you want to change are highlighted):

select and change matching:  ⌘ D

5. Need to insert and move to a (blank) line above or below the line you’re on?

insert empty line above:  shift  ⌘  enter
insert empty line below:         ⌘  enter

6. Need to see jump to your closing or opening bracket? (this works with [ ], { }, and ( ) !)

got to corresponding bracket:   shift  ⌘  \

Files Shortcuts

1. Need to find a file without searching through your entire file structure?

search for a file:   ⌘ P

Terminal shortcuts

1. Tired of seeing all those failed tests and/or error messages?

clear the terminal:   ⌘ K

2. Need to see more of your code but that pesky terminal is cutting your view in half?

toggle the terminal:   ⌘ J

Bonus: Extensions

VS Code also has a TON of useful extensions that you can of course open with a keyboard shortcut:

Extensions:  shift  ⌘  X

…then use the search bar to find the extensions listed below (or look for others that might be useful for your project!)

1. HTML Boilerplate

Once you have this one installed, just start typing html, then select html-boilerplate from the suggestions drop-down:

2. Auto Close Tag

Never forget an HTML closing tag again — as long as you type the > in the opening tag, the closing one will auto-generate (*combine this with ⌘ enter to get to the next line without using your mouse!)

3. JavaScript (ES6) code snippets

This extension is like a library of JS shortcuts — once it’s installed, there is a list of triggers that can be used to create common js snippets (the → means tab). Here are a few of the most useful:

forEach loop          fre→      array.forEach(currentItem => {})console log           clg→      console.log(object)anonymous function    anfn→     (params) => {}named function        nfn→      const add = (params) => {}creates a method      met→      methodName(params) {}

Additional resources:

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets