DEV Community

Cover image for 💻The guide to Visual Studio Code shortcuts, higher productivity and 30 of my favourite shortcuts you need to learn
Michael "lampe" Lazarski
Michael "lampe" Lazarski

Posted on • Updated on

VS Code Shortcuts 💻The guide to Visual Studio Code shortcuts, higher productivity and 30 of my favourite shortcuts you need to learn

Introduction

Visual Studio Code lets you access almost every feature it provides by a command that is accessible via the command palette or via a shortcut on your keyboard.

You are probably working 8 hours every workday and hopefully for you the most time of these working hours you can code. So you are spending much time staring at your code editor of choice.

Knowing some shortcuts can help you to get your work done faster. Knowing how to find the file you need faster. Running your NPM command, you need right now, instead of opening an external Terminal.

hands typing quickly on a keyboard

Shortcut cheat sheets

The makers of Visual Studio Code

You can download these cheat sheets, print them, and put them on your desk for a quick reference or try to learn them while your commuting to work. Don't try to learn them all at once. This takes time. So be patient, and you master them all.

Keymaps

Are you a Vim user? Maybe the Emacs shortcuts are tattoed into your brain? Alternatively, for whatever reason, you used notepad++ and appreciated the keyboard shortcuts from notepad++😵?

Visual Studio has an extension for all of you! Let's install the ⚛Atom Keymap. We will do this without the help of our beloved mouse (almost).

1) Open Visual Studio Code.

2) Once Visual Studio Code is open press: CTRL+SHIFT+X. That shortcut opens the Extension list, and your cursor focuses the search bar. Type the following @category:keymaps. (If you want to know more about how extensions work in how this section works leave a comment down below!)

3) You see now a list of keymaps. Press Tab and then the Down Arrow ⬇.

4) Press until you have selected the Atom Keymap. Now press Enter.

5) Sadly I can not find a method for selecting the Install button. You now need to click🖱!

You can find a Keymap for almost every editor you can imagine. Install the one you like the most, and you have your shortcuts! Cool right?

Keyboard Shortcuts settings (JSON)

There are to ways to view the Keyboard Shortcut Settings. One of them is through a graphical interface or can also choose to use to edit the shortcuts through a JSON file.

Graphical interface

We can open the Graphical interface by pressing CTRL+k and then by still holding CTRL you should press CTRL+s.

Keyboard Shortcut Settings GUI

On the top, you have a search bar where you can search for either the command or the keyboard shortcut you want to check out. These dialouges tend to look the same in Visual Studio Code and you will start to see them alot.

You can see four columns. Let's go through them.

*Command: The action Visual Studio Code performs.

  • Keybinding: The combination of keys you have to press the execute the action.

  • When: This is a filter for Visual Studio Code It tells Visual Studio Code if the shortcut should be actionable in that context or not. Some filters could be the integrated terminal, an error in your source code, and many more.

  • Source: There are multiple ways of how Visual Studio code can know about shortcuts. The most common one is Default these are the commands that come with Visual Studio Code out of the box. User is as the name suggest commands that are created by the user. The third way is by Extension. An extension author can also decide to add a shortcut. If your favourite shortcut does not work, this can be a source of why it stopped working.

To change the keybinding, you double click the row and a modal pops up. Then you press the key combination you want and hit Enter.

key bindings JSON file

Now that we know how it key bindings work in general let's have a look at at the keybindings.json file.

There are two of these the default keybindings.json and the user-specific keybindings.json file. Press CTRL+SHIFT+P or F1 to open the command pallet and type keyboard shortcuts you now should see at least two entries in your command pallet.

  • Preferences: Open Default Keyboard Shortcuts (JSON).
    This is the file where Visual Studio Code Stores all the default Shortcuts and a list of available shortcuts at the bottom that are not used. I would avoid changing them here.

  • Preferences: Open Keyboard Shortcuts (JSON)
    This is a user-specific key bindings file, and you should edit this file. In the beginning, it will be just an empty array nothing more!

To add a shortcut in the JSON file you simply just need to add an object like the following one:



[
    {
        "key": "CTRL+ALT+P",
        "command": "git.pull",
        "when": ""
    }
]


Enter fullscreen mode Exit fullscreen mode

You need to specify the key and the command. The when tells Visual Studio Code where it should run this command. If you leave it empty, it will listen everywhere for it. We talked about this in the last part.

Useful shortcuts

Open the Command Palette

You know this one already, but maybe you skipped to this part 😉

  • CRTL+SHIFT+P or F1 This will open the most powerful feature in Visual Studio Code. The Command Palette. Just type what you think you want and it still finds it!

Opening and closing the sidebar

Sometimes you want to have more horizontal space, and the sidebar is in your way! Just press

  • CTRL+B

You can toggle the sidebar on and off

Enter Zen Mod

You are like what Zen Mod in Visual Studio code? Yes, its build-in!
For that, you need to press:

  • CTRL+k, let go of both keys and press z.

This will toggle Zen Mod on and off.

Focus the integrated Terminal

One of my favourite features is the integrated terminal in Visual Studio Code. I'm using it 99% of the time! So to quickly open or close it, you need to press:

  • CTRL+j

This will open the integrated terminal and focus the cursor in it. If you press it again, it will close, and your cursor goes back to where it was.

Search for a file in your project

Visual Studio Code has a great file search build-in. It is also super fast when you use the remote Extension. To open it you simply press:

  • CTRL+p

This opens a dialogue where you can see your recent open files that alone is very nice. It also supports fuzzy search. This means you can type any word, and it looks in the hole path of the file. So you don't have to be exact! That dialogue also supports a lot more things. Like go-to line or debugging and a lot more features! If you would like to know more comment down below.

Switch to a recent open workspace

You work in a microservice architecture and need to switch folders all the time? Because you don't use a mono repo? I have the shortcut for you! Press:

  • CTRL+r

This opens a dialogue with a list of recent open workspaces/folders.
Bonus tip: If you hit CTRL+ENTER in that dialogue Visual Studio Code opens it in a new window.

Split your editor window

People love vim because it is easy to split views among the editor. Visual Studio Code has that also build in. Just press

  • CTRL+\

To create 2 columns or

  • CTRL+k, let go of k and hold CTRL and press \

To create a new row. The second one sounds harder then it is, but once it is in your brain it takes you ms, and you know how to change or create new shortcuts now 😉

Focus an editor window

Now that you know how to split the editor window, you also need to learn how to jump around these views quickly. This is pretty easy and also has a default key binding. You need to press

  • CTRL+[1-9]

This means that you need to press CTRL plus the number of the window you want to focus on. For the first one press CTRL+1 and the second window CTRL+2, you get the idea Easy right?

Close your current editor window

Now you opened too many editor windows, and you want to close them. This is quickly done by pressing

  • CTRL+w

This closes the currently opened window.

Close only the saved editor windows

Sometimes you have so many editors open that you don't know anymore what is saved whatnot. Yeah, I know you can see this with that dot in the tab bar, but still, it is too much for you to focus and find the right files. Visual Studio Code has your back! Just press

  • CTRL+k then let go of CTRL and k and press u

This saves all windows so you can check the unsaved windows and save them.

Open a new file

You need a new file to sketch some code? Alternatively, you need to create a new file for your pet project? Press

  • CTRL+n

This opens a new editor.

Change the language of your current file

You want to switch the selected language in your current file because you want Javascript (react) and not Javascript? Press

  • CTRL+k Then let go of CTRL and k and press 'm`.

This opens a new dialogue where you can search for the language you desire.

Go to Line

Let's now focus a little bit how to make editing easier. You have an error in line 1042(If your file is that long that alone is the problem). You don't want to scroll! Press

  • CTRL+g

This opens a dialogue, and you need to input the line number you want to jump to. This, combined with CTRL+p can be very powerful.

Go to Symbol

Your first question is, what is a Symbol? In programming languages, symbols are usually variables. In CSS, they are selectors. To see the dialogue press

  • CTRL+SHIFT+O

This opens a dialogue with a list of available symbols in the current file.

  • CTRL+t

You see a dialogue with just a # in it, and you need to type the symbol you want, and Visual Studio Code searches in the hole workspace for that symbol if this is supported by the language you are using. So you need to check that on your own.

Moving a line up or down.

Sometimes you need to move out that line that you had inside your if or just move a line because it's called to early. You can do that by pressing

  • Alt+Down

To move the current selected line one line down

  • Alt+Up

To move the currently selected line one line up

Copy the current line

You want to fill that array with some variables, but you are too lazy to write a loop. So how do you get array[0] array[1] and array[2] populated? By copying the first line twice and just changing what you need. For that press

  • ALT+SHIFT+Up

This copies the currently selected line and pastes it in one line above

  • ALT+SHIFT+Down

This copies the currently selected line and pastes it in one line beneath
(This shortcut would have been handy here)

Show a suggestion

Visual Studio Code has build-in suggestions. Most of the time it pop-ups automatically for you but sometimes it won't, and you really need it. Easy, press

  • CTRL+Spacebar

This opens the suggestion dialogue

Comment out the current selection

Sometimes you need to isolate code and comment out everything around it. Press

  • CTRL+/

If you multiple lines selected it comments them out. If you don't have anything selected, it comments out that one line only.

Select multiple lines of code

To comment out that code block, you need to select more than one line. This is done by pressing

  • CTRL+Shift+Up

To start selecting from the current line and moving the cursor up.

  • CTRL+Shift+down

To start selecting from the current line and moving the cursor down.

Fold and unfold your code

You have this big function, but you really can not see it anymore because it is too big and need refactoring, but you don't have the time, so you want to forget about it? You can fold and unfold code so that out of 100 lines you can make 1 line. To do that press

  • CTRL+SHIFT+[

To fold(hide) the code

  • CTRL+SHIFT+]

To unfold(show) the code

Cut a hole line

For this one, you can not have any code selected. Press

  • CTRL+x

This cuts the entire line when nothing is selected.

Indent / Outdent Line

People usually know how to Indent code. You do it by selecting the code you want to indent and press

  • Tab

Press Tab as many times as you wish so that it looks good to you.
Did you know that you can Outdent? Moving your code from right to left? You do that by pressing

  • SHIFT+tab

Conclusion

There are way more shortcuts. These shortcuts are the one I use the most often. I hope this helps you to understand more how shortcuts in Visual Studio Code and that you can now create your own one.

Have I overlooked a useful command that everybody needs to know?
Did you miss something? Was something not clear?
Please write a comment. I answer all of your questions as best as I can!

👋Say Hallo! Instagram | Twitter | LinkedIn | Medium | Twitch | YouTube

Latest comments (40)

Collapse
 
dantederuwe profile image
Dante De Ruwe

You forgot the multi-caret shortcuts that I use all the time: Alt+click to insert multiple carets, "middlemouse hold and drag" to insert multiple carets on the same position, or even select a "block" of text.

And then last but not least: select a word and do ctrl+D multiple times. It will select that word in the upcoming lines, useful for renaming a variable for example. You could do this with F2, but ctrl+D shines where you accidentally named a variable twice or if you made a mistake and used variable x where you should've used y, and don't want to rename them for example.

Collapse
 
sumitmoga profile image
Sumit Kumar • Edited

Hi Michael,

I like your settings. I apply almost all in my VS but after apply my terminal showing like below how to fix
prnt.sc/t4i349

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Thats a strange bug.

I would create an issue at the github vscode repo.

Collapse
 
sumitmoga profile image
Sumit Kumar

No issue i fixed that actually i change :
"terminal.integrated.fontFamily": "monospace",
to
"terminal.integrated.fontFamily": "Hasklig",
and started showing that...now i revert this to monospace

Collapse
 
saramon profile image
saramon

Good post. Especially for someone like me who tries to let go Sublime.
What I still couldn't figure it out is how could you select some code from several lines.
In Sublime, I could click where I want to start, then hold Shift and click where I want to stop, then hold Ctrl and click where I start selecting again and hold Shift and click where I want to stop.
In VS when I do that it gets selected all the lines.

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Thank you :)

What I do in that case I select what I want to highlight for example _id and then I press CTRL+d and this will also select the next instance of _id.

Collapse
 
aleon1220 profile image
Andres Leon

simple and nice. Easier to read in a table or bullet point format. Great effort. Thanks

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Thank you very much 😊 👍

Collapse
 
hhagely profile image
Herb Hagely

Ctrl(or cmd)+d selects the next instance of the word your cursor is currently on. It's awesome for renaming multiple instances without changing every instance. I use it all the time!

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Oh, right I always forget about that one!

Collapse
 
maxim222 profile image
Maxim Geerinck

I also like Ctrl+k and then 1-9 it folds structures 1..9 levels deep

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Didn't know that one!

Collapse
 
pzelnip profile image
Adam Parkin

Minor typo: "Enter Zen Mod" should be "Enter Zen Mode", but otherwise a great article!

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Thanks, changed it.

Collapse
 
kimschulz profile image
Kim Schulz

for me in VS code for linux, I have multi-cursor on alt-shift-up/down as default and copy line on ctrl-alt-shift-up/down. This was default when I installed it.

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Hmm,

I'm on Arch Linux with gnome-shell.

And Just installed a fresh version of VS Code.

Works like in the article 🤔🤔.

Collapse
 
kimschulz profile image
Kim Schulz

Strange. The official keymap for linux (link in the beginning of the article) also say that shift-alt+up/down is insert cursor above/below.

Thread Thread
 
lampewebdev profile image
Michael "lampe" Lazarski

Yeah, strange.

Also, I'm using a german layout on my keyboard and in the system, I have chosen an English layout :D

I wrote this on a Windows machine. So yeah looks like there are slight differences in Windows and Linux but I use both and never paid attention to it.

Collapse
 
adusoft profile image
Geofrey Aduda

Ohhh yes, You saved me the learning curve i could have undergone while googling

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Your welcome and I'm glad that I could save you time :)

Collapse
 
ianyates profile image
Ian Yates

Rectangular selection...
This one always gets me in VS code. In VS, SQL management studio, etc, the key is Alt Shit & arrows.
But in VS Code, as you explain, that duplicates the line.
How do you do it in VS Code? Super useful when you need to enter the same text into multiple lines at once, possibly with an overwrite.

Collapse
 
edoardoc profile image
Edoardo Ceccarelli

shift+alt + select with mouse will give you a rectangular selection / column selection... also, middle mouse click does it.
Unfortunately works for mac only (at least for me), on Linux there seem to be some conflict with window movements, I have not tried it on Windows and I'd like to know.

code.visualstudio.com/updates/v1_2...

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski • Edited

Ahh okay!

Yeah, that works on windows for me but I don't use that.

Can not think of any situation where i need that 🤔

Thread Thread
 
edoardoc profile image
Edoardo Ceccarelli

yes, it isn't really an everyday thing but it can be useful when editing SQL or old languages where column alignment is everything. To tell you the truth I started using that on the native os x text editor, you just press option and start dragging around, the cursor becomes a cross and all makes a bit more sense :)

Thread Thread
 
lampewebdev profile image
Michael "lampe" Lazarski

Okay, usually when I work with SQL it is not directly SQL but some layer over SQL ;)

So with what old languages are you still working with?

Thread Thread
 
edoardoc profile image
Edoardo Ceccarelli • Edited

yes, that is what one should do (in fact lately I am dropping SQL all together), but the box selection I used it a lot when I was creating ui elements in objective c with this tool, ASCIImage that transforms a string like this:

+ (UIImage *)chevronImageWithColor:(UIColor *)color
{
NSArray *asciiRep =
@[
@"· · · · · · · · · · · ·",
@"· · · 1 2 · · · · · · ·",
@"· · · A # # · · · · · ·",
@"· · · · # # # · · · · ·",
@"· · · · · # # # · · · ·",
@"· · · · · · 9 # 3 · · ·",
@"· · · · · · 8 # 4 · · ·",
@"· · · · · # # # · · · ·",
@"· · · · # # # · · · · ·",
@"· · · 7 # # · · · · · ·",
@"· · · 6 5 · · · · · · ·",
@"· · · · · · · · · · · ·",
];
return [self imageWithASCIIRepresentation:asciiRep
                                    color:[UIColor blackColor]
                          shouldAntialias:NO];
}

into these hi res images, on the fly:
chevron rendered
it really helped a lot although you end up creating the weirdest copy and paste combinations - hence the box selection :)

Thread Thread
 
lampewebdev profile image
Michael "lampe" Lazarski

Crazy stuff!

Collapse
 
lhartvik profile image
Lars Hartvigsen • Edited

ctrl+alt and up/down arrow lets you edit several lines at once

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Oh, he means multi editings!

Yeah I left that one out because it this is one little harder to understand there will be an extra post about efficient editing :)

Thread Thread
 
lhartvik profile image
Lars Hartvigsen

That's great, looking forward to it!

Thread Thread
 
lampewebdev profile image
Michael "lampe" Lazarski

Thank you :)

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

I don't fully understand.

Can you explain a little bit more what you need?