DEV Community 👩‍💻👨‍💻

Cover image for My top 10 VS Code shortcuts you don't want to miss
Terry Li
Terry Li

Posted on

My top 10 VS Code shortcuts you don't want to miss

As a keyboard guy, I'd like to leverage all kinds of shortcuts as much as I can. It is especially true when it comes to coding. VS Code has been my favorite code editor for years, and I really love the way it allows me to use and customize shortcuts. Today I picked my top 10 super awesome shortcuts. Check it out!

1. Go to last edit location ⌘K ⌘Q

Sometimes when I write the code, I need to pause a bit and go to different files to check other things. And after that, I need to quickly go back to the place where I was editing. This shortcut makes the move so easy.

Go to last edit location

2. Go to bracket ⌘ ⇧ \

Sometimes I want to quickly go to the end of a block to add some new code, and I can put the cursor on the opening bracket and type ⌘ ⇧ \ to jump to the closing bracket. This works better than scrolling down and visually searching the matching bracket. This also works when you want to jump from the closing bracket to the opening bracket.

Go to bracket

3. Select to bracket

No default shortcut. I use ⌥ \

This one allows me to quickly select everything between brackets. It is super handy when you want to copy or move some code out of a block.

Alt Text

VS Code doesn't have a default keybinding for this, so to enable it, you can type ⌘ ⇧ P to open command palette and go to Open keyboard shortcuts (JSON), and paste the code below.

{
  "key": "alt+\\",
  "command": "editor.action.selectToBracket",
  "args": { "selectBrackets": false }
}
Enter fullscreen mode Exit fullscreen mode

4. Go to matching pair

No default shortcut. I use ⌘ H

Similar to go to bracket, this allows you to quickly go to the matching tag. I really love this when I am writing React components, as I can easily move to the opening or closing tag and add new code from there.

Go to matching pair

Again, this one doesn't have a default shortcut. You can add the code below to enable it.

{
  "key": "cmd+h",
  "command": "editor.emmet.action.matchTag"
}
Enter fullscreen mode Exit fullscreen mode

5. Go to the previous file ⌘ P P

I use this shortcut A LOT. Say I open file-A, and then switch to file-B, and if I want to go back to the file-A, I cannot really use go back, because go back is cursor-based. I cannot use go to the last edit location either as I haven't changed anything. So in such case, I hold and press P twice and release , it will bring me to the previous file.

Go to the previous file

6. Go to symbol in editor ⌘ ⇧ O

Say I am looking at a file and I want to quickly jump to a function in the file, I can use this shortcut and type the name of the function, then hit enter to jump to it. This is quicker and more accurate than using Find.

Go to symbol

7. Toggle column selection mode

No default shortcut. I use ⌘ ⇧ I

This is super cool when I want to add/remove code on several consecutive lines. Instead of using the mouse to do multi cursor selection, I type ⌘ ⇧ I to turn on the column selection mode and then hold and press arrow keys to select multiple lines to edit. After finish it, I type the shortcut again to turn off the column selection mode.

Toggle column selection mode

You can add the code below to enable it.

{
  "key": "shift+cmd+i",
  "command": "editor.action.toggleColumnSelection"
}
Enter fullscreen mode Exit fullscreen mode

8. Focus on Files Explorer

No default shortcut. I use ⌥ ⌘ J

I use this shortcut to focus the current file in the explorer, so I can rename it or create a new file in the same folder. This is really handy as I don't need to click the mouse or manually look for the file in the file tree.

Focus on file explorer Text

You can add the code below to enable it.

  {
    "key": "alt+cmd+j",
    "command": "workbench.files.action.focusFilesExplorer"
  }
Enter fullscreen mode Exit fullscreen mode

9. Organize imports ⇧ ⌥ O

Sometimes as I refactor the code, I might have some unused imports at the beginning of the file. Instead of manually deleting them, I use this shortcut to do the job automatically. This one also re-orders the imports to make them look clean.

Organize imports

10. Add all missing imports ⌘ .

This shortcut is actually for quick fix. I found there is an option that allows you to add all the missing import statements, so you don't need to add them one by one. This option is available in typescript files.

Add missing imports

That's it. I hope you enjoy this post.

Feel free to ask me any questions. You can also find me on twitter.

Top comments (5)

Collapse
 
zalithka profile image
Andre Greeff • Edited on

Thanks Terry, I've definitely discovered a few new shortcuts today.. :D Very helpful indeed.

Might be an idea to include the standard shortcuts for non-Mac platforms though.. I'm a Linux guy myself, so since I don't have , the "go to matching bracket" shortcut for me is ctrl+shift+\... Many people don't use all three major platforms, so this sort of thing isn't always blatantly obvious.

Collapse
 
rogiervandenberg profile image
Rogier van den Berg

Very nice, thanks for sharing! I have a question though, as I love to navigate with my keyboard only, I find that "Focus on Files Explorer" is not complete yet.

Because how would you then select and open a file + go back to the editor? 🤔

Collapse
 
rogiervandenberg profile image
Rogier van den Berg • Edited on

Hm.. it seems you can use ⌘ 0, 1, etc. to select parts of the screen.

So right now, I'm using ⌘ 0 for selecting the sidebar (or just the above ⌥ ⌘ J for always directly going to your files explorer), opening a file with space, and ⌘ 1 for going to my code editor.

So the answer is:

  • ⌥ ⌘ J
  • Arrow up/down for your file
  • Space
  • ⌘ 1

If there is a shorter route, I'd love to hear it.

Collapse
 
darryl profile image
Darryl Young

Thanks for sharing, Terry! I learned some new things there.

Collapse
 
deta19 profile image
mihai

whats the best sublime command plugin for vs code?
i mean one that offers the the complete keyboard commands

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠