DEV Community

Cover image for 14 VS Code Shortcuts to Supercharge Your Productivity

14 VS Code Shortcuts to Supercharge Your Productivity

Domagoj Vidovic on July 27, 2021

We, software engineers, tend to be extremely efficient beings. Our goal is to optimize everything, not just the code. That's why we don't want to...
Collapse
 
teja463 profile image
Brahma Teja Ponnuru

For #7 Duplicate line -> Alt + Shift + Down Arrow to create a duplicate line.

Collapse
 
mightycoderx profile image
MightyCoderX

Yeah I thought of writing that, but you did it first, thank you. This is two times faster and doesn't overwrite your clipboard, that's why I always use it!

Extra trick!
You can move lines up and down by using Ctrl+Arrow Down/Up, which is faster than using Ctrl + X and Ctrl + V, or Ctrl dragging with the mouse, when you need to move the line nearby!

Collapse
 
darrylnoakes profile image
Darryl Noakes • Edited

Moving lines is Alt + Down/Up by default.

Collapse
 
leob profile image
leob • Edited

You forgot what might be THE most powerful shortcut/feature in VSCode: navigate back/forward! (navigation history, not 100% sure what it's really called)

So, it works like this:

You move around in the code, e.g. you jump to a method, perform a search, go to the top of a file, go to the bottom of a file, open a new file, and so on and so on, anything that changes your "location" in the source code - now "navigate back" let's you instantly go back to the previous "places" where you've been (and "navigate forward" to move in the other direction).

I'd call it "super powers", if you learn only one shortcut, then learn this one.

P.S. and the second most useful feature is that you can override all of these keyboard shortcuts - I find some of them way too complicated and impossible to remember (especially having worked with IDEs before, which has similar actions but different keys for them) - so I just redefine a bunch of them.

Collapse
 
darrylnoakes profile image
Darryl Noakes

VS Code calls this "cursor undo/redo". I really need to use this more often 😄.
The default for undo is Ctrl + U. Redo has no binding by default.

Collapse
 
leob profile image
leob

Not sure if that's what it's called, but I've (re)defined it like this, in keybindings.json:

{
    "key": "ctrl+up",
    "command": "workbench.action.navigateBack"
},
{
    "key": "ctrl+down",
    "command": "workbench.action.navigateForward"
},
Enter fullscreen mode Exit fullscreen mode

The internal name is "workbench.action.navigateBack" and "workbench.action.navigateForward", and I've assigned "control-up" and "control-down" to it (left and right would have been more logical, but somehow that didn't work).

This is incredibly powerful and I have the impression that not a lot of people know or use it, it's kind of tucked away and doesn't even have default key bindings.

Thread Thread
 
darrylnoakes profile image
Darryl Noakes

Sorry, I mixed up the two. I found cursor undo/redo in the keybindings menu, and thought it was that. It is like a much more toned-down version of Navigation. It only changes your cursor position, and skips to the beginning of the file if the "history stack" is empty.

Navigation is so much better!, as it navigates between files, and works at all times, not just when an editor is focused.

My VS Code keybindings for Navigation:

  • workbench.action.navigateBack: Alt + LeftArrow (default)
  • workbench.action.navigateForward: Alt + RightArrow (default)
  • workbench.action.navigateToLastEditLocation: Alt + K (default was Ctrl + K, Ctrl + Q)
Thread Thread
 
leob profile image
leob

Ah nice, I didn't know about the other one, but yeah "navigation" is indeed brilliant because it also navigates backwards/forwards across files ...

Thread Thread
 
darrylnoakes profile image
Darryl Noakes • Edited

left and right would have been more logical, but somehow that didn't work

Ctrl + LeftArrow/RightArrow don't work because they are Windows keyboard controls (also in pretty much all OSes). They navigate to the left and right of words.
For example (| represents cursor):
"I am some tex|t." => LeftArrow => "I am some |text."
"I am| some text." => RightArrow => "I am some| text."

Thread Thread
 
leob profile image
leob

Yeah that's why I chose different key combos for nav prev/next :)

Collapse
 
manoharreddyporeddy profile image
Manohar Reddy Poreddy • Edited

If you have installed notepad++ keymap like me:

Alternate commands (Windows verified)

   Search files           - ctrl + P
2. Search settings        - ctrl + shift + P

5. change all occurrences - ctrl + F2
   rename symbol          - F2

6. Delete a line          - ctrl + L
7. Duplicate  a line      - ctrl + D

9. Replace in a file      - ctrl + H
12 Split editor           - ctrl + \
Enter fullscreen mode Exit fullscreen mode
Collapse
 
darrylnoakes profile image
Darryl Noakes

My delete line is Ctrl + Shift + K, which VS Code says is the default.
Duplicate line's default is Shift + Alt + Down/Up.

Collapse
 
manoharreddyporeddy profile image
Manohar Reddy Poreddy • Edited

Oh .. my bad
This notepad++ keymap I have installed:
marketplace.visualstudio.com/items...

Collapse
 
codewithshahan profile image
Programming with Shahan

Yeah, I use this alternate commands.

Collapse
 
manoharreddyporeddy profile image
Manohar Reddy Poreddy

Cool ( some of the main commands didn't work for me :) )

Thread Thread
 
codewithshahan profile image
Programming with Shahan

Yep, me too.

Collapse
 
dhruvgarg79 profile image
Dhruv garg

My favourite is CTRL+D multi-cursor select same words.

Collapse
 
yatki profile image
Mehmet Yatkı

Hey @domagojvidovic , thanks for the guide.. It's not supported natively but you can also check this little extension of mine. It gives you CTRL + SHIFT + T shortcut to surround your codeblocks with snippets.

GitHub logo yatki / vscode-surround

🔥A simple yet powerful extension to add wrapper templates around your code blocks

Surround

Visual Studio Marketplace Visual Studio Marketplace GitHub last commit License


A simple yet powerful extension to add wrapper snippets around your code blocks

Features

  • Supports language identifiers 🚀New!
  • Supports multi selections
  • Fully customizable
  • Custom wrapper snippets
  • You can assign shortcuts for each wrapper snippets separately
  • Nicely formatted (Preserves indentations 🚀New!)
  • Sorts recently used snippets on top 🚀New!

Demo 1: Choosing a wrapper snippet from quick pick menu

Demo 1

Demo 2: Wrapping multi selections

Demo 2

How To Use

After selecting the code block, you can

  • right click on selected code
  • OR press (ctrl+shift+T) or (cmd+shift+T)

to get list of commands and pick one of them.

Hint

Each wrapper has a separate command so you can define keybindings for your favorite wrappers by searching surround.with.commandName in the 'Keyboard Shortcuts' section.

List of commands






















Command Snippet

surround.with (ctrl+shift+T)
List of all the enabled commands below
surround.with.if if ($condition) { ... }
surround.with.ifElse if ($condition) { ... } else { $else




Cheers, 🚀🖖

Collapse
 
haritsinh profile image
Haritsinh Gohil

In my windows pc Ctrl + G is for Goto Line not search for next occurence, is it default?

Collapse
 
darrylnoakes profile image
Darryl Noakes

Yes, that is the default.
You can go to the keyboard shortcuts settings menu (shortcut: Ctrl + K, Ctrl + S), find it there (either the key combo or the command), and look at the Source column.
Default is VS Code's default binding, User is one you added or edited, and Extension is one added by an extension.

Collapse
 
haritsinh profile image
Haritsinh Gohil

ok thanks dude.

Collapse
 
cenacr007_harsh profile image
KUMAR HARSH

Very useful post Domagoj.

Collapse
 
domagojvidovic profile image
Domagoj Vidovic

Thanks mate!

Collapse
 
abdadeel profile image
Abdullah Adeel • Edited

To duplicate a line or any block of code, if it line you can shift + alt with up or down arrow. Same shortcut is for block of code when selected. ✌🏼

Collapse
 
skyridertk profile image
skyridertk

14.1 Wrap Text
Alt + Z

Collapse
 
am_rahuls profile image
Rahul

Great write up! Here is my shortcut

Alt + Shift + F -> Auto indent code

Collapse
 
mackenzyman profile image
MackenzyMan

Ctrl + Enter go to next line no matter where the cursor is
Shift + Ctrl + Enter go up

Collapse
 
sdubie profile image
SDubie

For #7 use ctrl + d to duplikate a complete line or the selected text.

Collapse
 
cristobalnyram profile image
Cristobal Nyram

Great post, Thanks for you

Collapse
 
rtpharry profile image
Matthew Harris

Minor typo you have used crtl throughout which should be ctrl.

But I just learned a few keyboard shortcuts to quickly replace that 😉

Collapse
 
queencykoh profile image
queencykoh • Edited

For #5 to rename press F2 😊

Collapse
 
pavelee profile image
Paweł Ciosek

Thank you!

Collapse
 
snkhan300 profile image
Sardar Nawab Khan • Edited

Copy a line. A better way to do it is. option+shift+down arrow (mac)

Collapse
 
coldlombax profile image
John

I like to use CTRL + X, to cut a line, good for reshuffling code!

Collapse
 
jlangz profile image
Jakob Langseth

CTRL/CMD + / to comment out the current selection

Collapse
 
arvind625 profile image
Arvind Dhakar

For #2.
Search for settings => cmd + shift + p

Collapse
 
josephfisher profile image
Joseph Fisher

Thanks for sharing such a useful information. I will apply this while using VS Code on my windows 10 activator.

Collapse
 
jppan profile image
jppan

For #7 Ctrl + d would work too on windows. This works on almost all the IDEs(JetBrains) :)

Collapse
 
martinms profile image
Martin Mulyo Syahidin

VS code change my coding life, speed up my work with many usefull extension.