DEV Community

loading...
Cover image for 💻The guide to Visual Studio Code shortcuts, higher productivity and 30 of my favourite shortcuts you need to learn

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

Michael "lampe" Lazarski on August 04, 2019

Introduction Visual Studio Code lets you access almost every feature it provides by a command that is accessible via the command palette...
pic
Editor guide
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 Author

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
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 Author • 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 Author

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
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 Author

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
Collapse
lampewebdev profile image
Michael "lampe" Lazarski Author

I don't fully understand.

Can you explain a little bit more what you need?

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
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 Author

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
wrldwzrd89 profile image
Eric Ahnell

As someone who uses VS Code on all three operating systems it's supported on, and a heavy user of keyboard shortcuts already - just not the ones in VS Code - this is immensely helpful.

Collapse
lampewebdev profile image
Michael "lampe" Lazarski Author

Cool :)

One thing I have to ask:
When you are switching from or to OSX.
Do you also get confused with shortcuts?

Like my brain needs time to make that jump.
Switching from Linux to Windows no problem but OSX always feels different to me.

Collapse
wrldwzrd89 profile image
Eric Ahnell

Since macOS (formerly OS X) is my primary platform, and Windows / Linux share a shortcut scheme, it's actually not a problem at all. As long as I remember "Command for Macs, Control otherwise" I'm good to go.

Thread Thread
lampewebdev profile image
Michael "lampe" Lazarski Author

Okay for me it is the other way around. I always struggle to write an @ 😂😂😂

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 Author

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 Author

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
lhartvik profile image
Lars Hartvigsen

Very nice guide! I already use some of these, picked up code folding, close unsaved and split screen shortcuts and more. Thanks!

Collapse
lampewebdev profile image
Michael "lampe" Lazarski Author

Nice!

For me, the biggest game-changer at the end of the day was close unsaved.

When you are in a hurry to push to git 🤣🤣🤣

Collapse
th3n00bc0d3r profile image
Muhammad

Good lads!! cheers great guide

Collapse
lampewebdev profile image
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 Author

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 Author

Oh, right I always forget about 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
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 Author

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

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