VS Code shortcuts & tips to help you work faster

[@Thomas_000]

1:25 while selecting with CTRL+D, if you want to skip a match, you can use CTRL+K, CTRL+D

[@r-i-ch]

Also, instead of double-clicking on a word, you can just use CTRL+D to select it the first time.

[@CorCronje]

Great tips! Thanks Kevin. Another useful shortcut I like to use is CMD+P and then typing the filename, for quickly opening a file, thus I can keep the file explorer hidden most of the time.

[@heliorosa8148]

you can also jump to a specific line by adding :line_num after the file name

[@qwertycomp9618]

@@heliorosa8148 Just to add to that, if you do the “:line_num” without the filename, you jump to the line in your current file

[@Svish_]

Add Shift to that, and you get access to all VS Code commands, settings, toggles, etc.

[@adryelbarros3250]

Ctrl+shift+p > wrap with emmet Quick way to put a div (or any other emmet abreviation) around the selection If it is the last used command, just do ctrl+shift+p enter

[@KevinPowell]

yes, love that one! I've also mapped it to ctrl + k, then w. Not really any faster, but I use ctrl + k for other things too, so it's a bit more ... natural, for a lack of a better word.

[@CSSWeekly]

Thank you so much for sharing my video and channel, Kevin! I really appreciate it! 🙏 And I’m thrilled to hear that you found moving the sidebar to the right useful. I did pick it up from someone (years ago), but I can’t remember from who or where exactly. 🙂

[@KevinPowell]

My pleasure, keep up the awesome work :D

[@SerilaBuck]

my favorite shortcut is to set the "wrap with emmet" shortcut (it doesnt have any defaut shortcut) . i do a selection then my shortcut that I set(cmd + maj + a) , an input field appear and I can write the emmet code that will wrap my selection (like div.my-class>ul.list--alt>li.lsit__item ) I also do sometime just do the short where my cursor is at (without a selection) to make the emmet inout appear, and write my emmet code , and in real time see the result of it.

[@PeppertopComics]

After using Ctrl-D to select multiple items you also now have multiple cursors you can move around. So instead of typing "span-4" in full you can just press the right arrow to remove the selections but leave the cursors in place, then backspace to delete the "3" before typing "4". It only saves a few keystrokes in this example, but can save a lot more in many cases.

[@sergejstojanovic2518]

5:50 you don't need to click, just click Ctrl + G (I think that's default), you can then write down line number and it's going to put your cursor at that line. I am used to that so it seems faster but if you are not that fast at typing numbers maybe you'll need some time to adjust.

[@godmansarah]

Ctrl G is great in general, e.g after seeing a line number in DevTools you want to go to

[@msitman]

Thanks Kevin, I'd add Ctrl+Shift+k to delete a line has a lot of use also

[@Junonino]

Another tip: if you’re scrolling up and down and need to move the cursor to a specific line just type ctrl-g and enter the line number

[@suparthghimire1644]

One more (for HTML / JSX or any Markup Language files) (this is more of an emmet thing though) If you want to select a parent element while your cursor is on a child element like ... say you were inside the child class tag and want to select its parent, then its parent and so on, then you can use something called balance outward place your cursor on child and press ctrl+shift+p for command palate. Then type balance outward and select the option. For better productivity, set a shortcut for it (mine is ctrl + shift + /) which selects the parent for me if I cursor is inside the child element.

[@101stDay]

Sidebar on the right is 🔥 (I learned that from Engineering with Utsav). Great video Kevin!

[@gimpinator]

It's funny to see you make a video as such about productivity and shortcuts, because I am just preparing a presentation on my own company intern about that stuff next month. 😄 Besides your good points and the nice tips of the others I have one thing i personally find very handy when you get used to it. And that's the "Pos1" & "End" keys. In combination with the selection with the "Shift" key that another commenter pointed out, it can be very helpful to select code and navigate rapidly throught the code. And two little FYI for all, I find handy very often: - Set your curson on one line or select a bunch of code and use "ALT" and the arrow keys to move the lines where you want them. - And if you happen to land your hand on your mouse accidentaly, you can use the mousewheel to multi-line cursors, for e.g. rapid changing of 20 commas at the end of the line to semi colons. Sorry for the long reading. Hope this helps some of you. 🙂

[@dungmidside]

Great tips, I've been using VSCode for 4 years now and still amaze with these tips

[@pouriyanourouznejad7090]

1:11 I was away from coding these days. If I remember it correctly, I think Ctrl + Shift + L will select all matches. Its better than using Ctrl + D multiple times :D And I think Ctrl + Shift + K will delete the current line Try it! And let me know if it works!

[@shahidshafi1227]

Thanks for this shortcut alt+shift+(arrowup/arrowdown). I was looking for this shortcut from about a month.

[@ScottMackey]

If you really want to go with pure keyboard working then surely Vim extension in VS Code is the way to go. Take a bit of learning but worth it!

[@MMH94MMH]

Nice Video, i use CTRL+D always this is the best shortcut for me, i also use CTRL+X to cut a line (i used for deleting lines too) and CTRL+C to copy a line in both cases i don't have to select the line

[@abhim6380]

Cmd+shift+k removes line/selection without copying to clipboard.

[@bobdinitto]

Nice! I knew about CTRL+D but not X/C.

[@Svish_]

Another handy "mouse-usage-saver" is Ctrl+Shift+P which gives you access to all commands in VS Code, like "Format Document", "Toggle Word Wrap", "Sort lines", "Open Settings" and so on. Very useful!

[@marklnz]

Sometimes I find that I need to enter, or make the same edit, to multiple locations in a document at one time. In that case, multi-carat editing is awesome. This one does require you to use the mouse, rather than just the keyboard, but if you hold down the alt- key (not sure if this is still the same on the Mac, sorry) and click somewhere, you'll get a duplicate cursor. You can alt-click any number of times, to get many cursors (technically called carats). Now, all your keystrokes will be applied at EACH of the cursors. So you can delete, append, backspace, whatever, to multiple locations in your document at one time

[@archrodney]

I liked all the tips and knew most of them. But for replacing stuff like "rounded" to "round", I actually use Find & Replace which is Ctrl + H. There you can replace strings one by one or replace all if you wish.

[@CraigForsythDesign]

Great tips (as always) Kevin! A plugin that I have found which has made my dev flow simpler is "peacock"; If you are like me and have multiple projects open in multiple windows - this allows you to color the frame of each code instance with a different color! Made my life so much easier when tabbing from window to window.

[@KevinPowell]

Oh, that could be useful, thanks for the tip!

[@godmansarah]

Ooh, nice. I was using different themes in different workspaces, but this is better :D

[@grafixnetz]

I LOVE your videos. Not a one that I've watched has not yielded very useful, easy to understand information! GREAT tips for vscode. I use right sidebar in my photo editor. Will do same in vscode. When you describe the shortcuts, perhaps you would give the word that corresponds, like 'ctrl + d (for DOWN) or ctrl + l (for select LINE).

[@lowendfish]

Alt (option) + arrow up or down to move a line. One of my favorites.

[@SlimBloodworth]

Man, I love the sidebar on the right! It keeps it out of my way and I can forget about it until I need it.

[@chikenei]

Ur like a mind reader , u seems like u know what I’m always looking for

[@MysterX79]

The last years of course I got used to the default shorts and added some 20 or 30 user shortcuts, but I noticed that my hand was simply not able to type more shortcuts. Three modifier keys shift, ctrl, alt plus a letter and my fingers got knotted. So about 5 weeks ago, I threw EVERYTHING over board and created a totally new personal scheme. In the process I got to know this one crazy tool named Autohotkey for Windows, and it is really top level of all tools I ever knew. I now name just a few samples what is possible with it... - total control of every single input device - for example even emulate mouse with keyboard or other way around - snippets like "jd" becomes "John Doe" just an example - snap windows to predefined places via short cuts - CapsLock is a total useless key so I deprogrammed it as a 4th modifier key - emulate additional keys F13-F24 (accessable also in VSCode) on a regular keyboard - and so on... I highly recommend it

[@robbiedavey2439]

Some of my favourite things are in the Keyboard preferences setting the Inward and Outward keybindings as then it will allow you select blocks of code. Then also on Mac holding option and up/down to move a line of code up or down the file

[@nagendradevara1]

Can't wait to use these shortcuts ‼

[@Sean-Smith-Photos]

CTRL + ~ opens your terminal CTRL + SHIFT + 5 splits the terminal. I use these two all the time

[@maratuly_a]

My personal tip regarding scrolling is scrolling with mouse or touchpad while pressing alt. That way you scroll 2x faster. Btw, that works in Telegram too

[@frittex]

I needed that video for so long now. Thank you!

[@jitxhere]

One more is that using CTRL + SHIFT + P then in the command pallete choose wrap with Emmet. You can wrap any number of line selected with it and you can even define classname and so

[@Deeividy1]

this tips helped me work so fast that I'm here before 5 min of uploading the video

[@nuri00ko]

OMG Kevin! I've always used all of my panels (inside of design apps, code editors, and Mac dock) on the right (instead of left). My rationale is that the right panels require less mouse travel. It does take a little bit of getting used to when the apps default to a left panel.

[@_g4m3r_]

Thanks Kevin! Can you make an updated video about the best extensions you use?

[@bobdinitto]

Nice tips on keyboard navigation shortcuts. VSCode is so rich in functionality, even though I've been using it for months now I know I'm only scratching the surface of its capabilities. Always looking to learn more. I'm old enough to have started programming when mice weren't a thing yet, and we did EVERYTHING with the keyboard. The best screen editor back then was EMACS. In the years since my brain has grown lazy and it's easier to reach for the mouse than memorize all the keyboard shortcuts. Easier maybe, but not as productive!

[@jesuselyizux]

Thanks for sharing all these tips!! :)

[@SithLordBishop]

ooh that sidebar tip will take some getting used to but I think I like it. makes sense.

[@prakashkunwar1369]

Thankyou Kevin. Cool stuff as always.

[@bunmioke2697]

Pretty handy tips. Thanks.

[@bn5055]

Ctrl + P > start typing the filename > enter to jump to the file. Use the sidebar a lot less that way!

[@KevinPowell]

Yeah, that's a great one 🙂

[@ThuongNguyen-km7vg]

It's really useful for me. Thank you

[@khoinguyen-ft2ys]

Another useful trick is that type alt + left to move the cursor to the previous position

[@germantoenglish898]

If you realize that a line of code would be better somewhere else, you don't need to copy, cut, and paste. You can move it up and down by using Alt+Up/Down. (arrows) (As long as it's in the vicinity where you are currently working, of course)

[@babakfp]

4:16 Oh baby😍 I was looking for this for years. Do we have the same for creating a new line under a line? Now matter where your cursor position is, it's going to create a new line under that line

[@KevinPowell]

ctrl + enter :)

[@babakfp]

@@KevinPowell Yesss😍. No more ctrl + right/left arrow😂. Thank you so much👍

[@space8143]

Best! With love from Ukraine 🥰

[@yt_brij]

_Place a Cursor on a line and press _*_alt + uparrow_*_ to move the whole line upwards and press _*_alt + downarrow_*_ to move the whole line downwards._

[@Stoney_Eagle]

I had an extension that went bad today and VSCode gave me the devtools option, my mind was blown.... It's ALL HTML, everything is HTML inside Edge/Electron. 😱

[@bogush31]

thanks for all the tips. you are superhelpful

[@retronym4353]

Right hand side is the default in Visual Studio I believe, been using that in vs code for years. Also instead of CTRL+L you can do CTRL+SHIFT+UP/DOWN, it's much faster than reaching your hand over to the L key and synergises well with line duplication

[@gavincampbell1061]

Surely your right hand is closer to the L key than it is to the arrow keys if your hands are in a typing position?

[@retronym4353]

@@gavincampbell1061 Oops forgot that I use a tenkeyless so may not be applicable to most

[@dancehalllyrics1303]

Little side note to a great video: The line you’re standing on is already selected, meaning that you can copy it, cut it to the clipboard et cetera without having to highlight it first (this is a cross-language feature aswell). Just wanted to point it out.

[@cipherxen2]

Only "copy" and "cut" considers current line as selected (only if there is no other selection), "paste" doesn't.

[@x209sfinestx]

Thank you for the content.

[@Sampad-Sarker]

very helpful shortcut. plz make content like that

[@krissyville]

I actually had the opposite issue with the Sidebar. Using the Developer view on Dreamweaver for about 15 years had me in the habit of right sidebar, when transitioning to VSCode seeing it on the left side made my overall workflow feel *off* with everything shifting around. Right sidebar is absolutely the way to go!

[@TheVedantshah]

for me it moves around code even on the right side

[@mrs8683]

Another's tips: press CTRL + SHIFT + P to open quick action menu so you can browse all available shortcut

[@cintron3d]

You can use Ctrl+G then type a number to go to a line of code after you're done scrolling.

[@quicktastic]

I like the side bar on the right since that is how I'm used to it with Visual Studio. VS Code having it on the left seemed awkward until I realized I could move it. It's whatever you are used to I guess. :)

[@doubledeckercouch6251]

Fab - Moving the file explorer to the RHS is soo much better. This is how it is in "Visual Studio CODE" for C# developers. So it's great you have it like that in the normal CODE IDE.

[@crim-son]

This is awesooomeee!!!

[@universecode1101]

I use only and always VSCODE ❤️🧑🏻‍💻 for my personal projects or for my KZbin channel projects. Nice video 😊 and CMD + J or D these are my most useful 😝

[@faraznisar3752]

I was not happy that I'm already using these shortcuts. I always watch these videos on vs code but appare ntly I know most of them by now

[@sujeetbadnale9441]

GBU Brother. Thank you so much.

[@cameron1376]

Super helpful, thank you kindly Sir Kevin++ :)

[@RasperHelpdesk]

I've been using Visual Studio for 20+ years now, thinking I need to snag Visual Code at some point too

[@koubinhanz]

Nice. Thanks. Just wondering, is there anything to select all content between two tags ( and ) ?

[@klesus]

Can I add one that's more generic among most programs, and not just VS Code? Maybe you already know that you can move entire words by holding Ctrl while pressing the arrow keys, and that adding Shift lets you select entire words, but did you know that holding Ctrl and pressing Backspace/Delete removes entire words? I've been through several reddit threads about shortcut keys and have never seen this mentioned so I thought this might be a good opportunity to share.

[@scarletsun04]

2:30 personally, i'd rather double-click the word and then ctrl-f and replace all the words

[@5SenseGames]

and in addition to alt+shift+arrow you can just alt+arrow to *move* what you have selected instead of copying it

[@mustafamuse2904]

THANKS.

[@arifurrahman9133]

Thax kevin

[@CraigShearer]

Love the t-shirt! :)

[@georgeskeubou5966]

Which theme are you using?

[@gromish]

The duplicate selected lines can be achieved with the DEFAULT: CTRL+SHIFT+ALT+ (KEYPAD) 2 or CTRL+SHIFT+ALT+ (KEYPAD) 8 I got used...

[@fredhair]

Unfortunately I knew about all of these apart from Ctrl+L. I'm a vim user who uses VS for work and when on Windows so I love to use the keyboard for navigating and the vim extension is really nice for getting around but it's a bit of a pain sometimes where the bindings would be overlapping.

[@Cobinja]

Selecting the whole file can also be done by ctrl+a

[@kujanggumelar3245]

What I need, which probably others too is a shortcut for select all words between tag . Kindly share if you had

[@M4LICIOUS]

Simply add a VIM extensions

[@MrMinecraftLegendz]

Amazing shirt

[@VirtualDarKness]

Nice t-shirt 😁

[@ranigiterman8011]

Just use the vim extension

[@vothaison91]

Coming from Visual Studio, the first thing i changed in Vscode is to move the file explorer to the right.

[@marklnz]

LOL - as a long time Visual Studio user myself (I've used it since it was separate products for each language back in the 90s) I can't believe that I *never* thought to do this with VS Code!!! D'oh!!!

[@ajaysh73]

Can I sort on columns? I have big txt files with numbers in there but I want to sort records based on values in them from col A to Col B.

[@andybster63]

Hi Kevin, do you have any suggestion/recommendations for using VSCode and an FTP extension for uploading to a live site?

[@KevinPowell]

I haven't used an FTP in a long time now, so I can't help with that one :\

[@andybster63]

@@KevinPowell - hey, no problem but thanks for letting me know - keep up the 'learning me new n good stuff' channel! ;-)

[@AnastSid]

Helpfull video

[@progressisbeautiful1541]

Sidebar on the right in larger monitors makes code a bit more natural to look, as you look it more directly.

[@CSSWeekly]

Do you use a multiple-columns setup on a larger monitor as well?

[@godmansarah]

I'm the opposite actually, because of two monitors side by side. So having the sidebar on the left keeps the code more in my central view, even if I have two editor groups open

[@godmansarah]

Ah, but that's also because I code in the left monitor. If I coded on the right monitor, then yeah the explorer bar on the right would be better ;)

[@CSSWeekly]

@@godmansarah Thanks for your insight, Sarah! 🙏 Do you use the right monitor for the browser preview? And are both in landscape orientation? (Thinking about my setup, that’s why I’m asking. 🙂)

[@godmansarah]

@@CSSWeekly They are both in landscape, and I am only using the left monitor for VS code, even with two editor groups side by side. Yes, right monitor for browser, and other utilities. If and when I upgrade to Win 11 and get a single wide monitor, I'd likely change where things are positioned so the code is right in the middle. I think I currently do sit slightly more to the left of the monitors now though.

[@anitasunildesai]

How to create multiple tags of same.type like a list without copy paste or alt shift up/down?

[@user-uv2pj9ez4s]

hi! Why does vscode js make a wavy red line under expressions? semicolon expected scss, expected scss etc i am facing problem. i may have deleted wrong file. what should I do??

[@ErikBlomqvistSwe]

Isn't Cmd + arrow up/down just moving the cursor to the start/end of the document? Not sure about that "scrolling" shortcut on Mac tbh.

[@Svish_]

As someone who basically always have my VS Code split vertically, showing 2 files at once, the "Move Primary Side Bar Right" doesn't really make sense, as code will move around regardless what side it is on. 😛

[@NickyDekker89]

I see you like to use a lot of utility classes. Why not just run with TailwindCSS? Great video btw :)

[@Heas_Heartfire]

And the most important of them all, Ctrl + / and Ctrl + Shift + / to comment.

[@robopecha]

omg this video and the comments will change my life.

[@jameshobbs]

right side ftw

[@JimKernix]

You could use your right arrow key to make sure you are at the end of span-3, then backspace the 3 and then type 4. You also do not need to select the line to cut (delete) or copy - if your cursor is on the line you want to remove you can just do CTRL+X

[@1vader]

I also generally use Ctrl+X to delete lines but keep in mind that it will actually cut the line, i.e. if you have something copied in your clipboard you want to preserve, it will override it. You can use Ctrl+Shift+K to simply delete a line without any impact on the clipboard.

[@JimKernix]

@@1vader I know. I don't use it but you can access multiple items in your clipboard with WIN+V.

[@dweblinveltz5035]

Moving the side bar is pretty nice! Not sure why, but CMD+arrow-up or down doesn't scroll the page for me. It puts the cursor at the first or last line.

[@StrikerFeed]

cmd+fn+up/down - scrolls multiple lines control+fn+up/down - scrolls lines one by one (as shown in the video)

[@sahannethsara3134]

Tnx

[@ShawnRitch]

Now that I'm getting used to it, I kinda like it. lol That's what she said ;)

[@shahidshafi1227]

Which theme are you using sir @KevinPowell

[@KevinPowell]

Atom One Dark 🙂

[@shahidshafi1227]

@@KevinPowell Thanks

[@mrouquin]

Alt+Z for having all lines in breaking in the page (so you dont have to scroll right)

[@ricardodesirat2590]

Nice Kevin. Some other cool ones: ALT+SHIFT+Right or Left to select/deselect elements upwards/downwards from cursor. CTRL+Enter inserts a new line and moves the cursor to it but without the content to it's right. Great for emmet and snippets in CSS or going to a new line and leaving the ; in the previous :) By the way, the panel in the right makes the lines move if word wrap is on (CTRL+ALT+Z - on/off). Can be annoying.