The most useful keyboard shortcuts in VS Code

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:

Image for post
Image for post

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
Image for post
Image for post

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 ↓
Image for post
Image for post

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: ⌘ ]
Image for post
Image for post

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
Image for post
Image for post

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
Image for post
Image for post

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

got to corresponding bracket:   shift  ⌘  \
Image for post
Image for post

Files Shortcuts

  1. Need to find a file without searching through your entire file structure?
search for a file:   ⌘ P
Image for post
Image for post

Terminal shortcuts

  1. Tired of seeing all those failed tests and/or error messages?
clear the terminal:   ⌘ K
Image for post
Image for post

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

toggle the terminal:   ⌘ J
Image for post
Image for post

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:

Image for post
Image for post

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!)

Image for post
Image for post

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) {}
Image for post
Image for post

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

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store