VSCode Keyboard Shortcuts For Productivity

[@vincentandrieu5429]

2 shortcuts that I use at least 10 times a day: - Cmd+Shift+L selects all occurrences of the highlighted text, very handy to rename a method, a variable or refactor a duplicated bit of code at all places at once - Cmd+Shift+F to search some text in the whole workspace

[@MarkEdwardTan]

Thanks. Both are life savers :)

[@tyuiogtyuio8539]

On Windows: Ctrl+Shift+L and Ctrl+F respectively

[@AjayKumar-ts5jd]

where can i refer for shortcuts like core css codes directly. i am beginer !

[@minh_tran]

​@Jonathan Agree. I use f2 frequently and it'll change the name in all files that reference that variable. Super handy

[@vincentandrieu5429]

@Jonathan agreed, but I work a lot on data files (such as .csv or crappy .txt files) and whenever I want to change some text to another in the whole file, it's useful to use Ctrl-Shift-L 🙂

[@vishnyo]

Select variable and hit F2 to rename the variable in every places where it was used

[@gvcallen]

@@c1dk1n I'm using C++ and was just messing around with it - had a function named "func" and wanted to rename it with F2. It was wanting to also name symbols called "func" in the actual files inside my compiler. Quickly discarded that feature and decided to stick with normal find and replace haha. But for other interpreted languages it might be okay - just make sure you have a look at the refactor window quickly first

[@tvguideondemand]

@@c1dk1n Never. Not even once. I use it every day.

[@anroiduser1222]

Wow that is so powerful

[@khgriffi]

1) Control +J will merge lines. I find it very helpful when editing HTML and even JavaScript sometimes. 2) there’s a shortcut to wrap HTML in another pair of HTML tags. you have to create a shortcut for it though. Search ‘Emmet: wrap with abbreviation’ 3) you can easily wrap a set of characters in () or {} or ‘’ or “” by highlighting the text and pressing the left version of the wrapper character. So if you highlight the word hello, then press (, the result will be (hello)

[@khgriffi]

Roshan Jafri I’m on Mac. Cmd + J opens the command line for me. Control + J merges lines. Search “Emmet: merge lines” - you might have to manual set a key binding for it if you’re on pc.

[@tvguideondemand]

Oh I love these HTML ones! Update tag is really useful also.

[@kxnyshk]

omg idk but *Ctrl+L* opens the terminal win below the ide for me n vsCode for some reasons.. 🤷🏾‍♀️

[@szitastamas]

I started using most of these shortcuts a while ago and the difference is really noticable, not only in speed but also the flow of coding feels much more natural and smooth :) thank you for the summary!

[@scottdunbar5155]

Hi Brad, I don't comment on videos much but I will here for a couple of reasons. First of all this was exactly what I was looking for when I did my search, I am so glad I chose your video. Second, I have watched a lot of your content and you have one of the best youtube channels for coders out there, if not hands down THE best. Last but most certainly not least, our life stories/experiences/hardships (as far as you've mentioned, anyway) have a creepy lot in common and you are very inspirational to me so I just wanted to thank you so, so, so very much. You might know, and I hope you do, that just showing people like me what is possible means so much more than I can say in a short comment. You have made a huge difference and I just thought you should know that. THANK YOU!!! -JD

[@More-right-rudder]

Thank you so much for the video, I was looking to learn VS Code too. As a dev a lot of the time we do not focus on learning our tools, learning our IDEs. Learning all these shortcuts has really helped me to be productive as a Software Eng. This was also one of the tips Tech lead has mentioned in his video.

[@bawad]

Holy crap Go to Entity is super dope, I'm stealing that one ;) One my favorite shortcuts is Go to Definition: Cmd+Click on a function/variable and it will take you to where it was created. It's great for navigating.

[@bibibobs]

Or have your cursor on the instance and press F12

[@chineduknight6426]

Brad is a shortcut expert, the React course changed my life for good, in the end it's the little things that matters the most. Thanks 😊

[@kirillvoloshin2065]

what a coincidence - I have written down some shortcuts on Monday! F2 to rename the variable in a whole document is nuts! ALT+L ALT+O to start a live server (you need to install Live server extension before). Also installing ES7 snippets to quickly create promises, forEach etc! Alt+Down/Up to move lines. Ctrl+Shift+K to delete a line. Alt+Shift+Down/Up to duplicate a line. Ctrl+Enter to add a line below. Ctrl+Shift+Enter to add a line above.

[@donniewhite6120]

This IMMEDIATELY made my life easier. I just DL'd the PDF and it's on my desktop

[@Lambdaphile]

Move by word should be Alt + Left/Right on Mac. My favourite is go back/forward with Ctrl + -/Ctrl + Shift + -. "Go to Entity" was one which I was not aware of and which I'm definitely going to use! Thanks :)

[@ivanskubko9177]

also try to hit ctrl+D while cursor stays in the middle of the word - it will highlight the whole word (cmd+D for Mac)

[@voidmind]

Not only that, but once a word is selected that way, every time you hit Ctrl+D after that will select the next instance of that word in your file, which you can then do multi-line editing on or just paste over the selections.

[@zephyrrmahesh3109]

@@voidmind and if you want to select all instances of that word, Ctrl+F2 will do.

[@dancehalllyrics1303]

Be aware: Some of the standard settings of VSCode's shortcuts may depend on where in the world you are. Example given, I live in Denmark, so the standard keyboard shortcut for opening up the terminal for is by pressing CTRL + æ (a Danish letter). And then a little shortcut I found by accident but turns out being helpful. Instead of pressing CTRL + D to highlight the next coming appearance of a word, class or anything that appears multiple times on your screen, try pressing CTRL + SHIFT + L. This shortcuts highlight every single appearance of that word, class or anything that appears multiple times on your screen. And what's even more cool about it is that you do not have to go to the top to find the first one. You can simply highlight it wherever you find it first, press the shortcut buttons and you're good to go.

[@somnvm37]

1)ctrl+w works in browsers too. Also, ctrl+t makes a new tab 2)ctrl+shift+t also works in browser 3)if you want to switch between windows, use alt-tab (works in win7, not sure about other systems) 4)if you want to refresh page with deleting all cashe, use ctrl+shift+r 5)alt+z use it all the time, if you want to wrap text 6)ctrl+shift+n makes folder (works in win7, not sure about other systems) 7)F11 opens any window at fullscreen mode. F opens youtube video at fullscreen 8)alt-F4 - closes window 9)Not a shortcut, but you can press win button, then write "code" (or any other word from Visual Studio Code) and press enter. It will open vscode. This is a quick way to open any programm

[@LardBucket_]

If you're the type of user that wants to minimize the time you spend moving your hand to and from the mouse, I recommend the VSCode extension VsVim. It emulates basic Vim operations, which have a learning curve for sure, but are super efficient once you get them down. You can also configure whether VSCode or Vim should handle each keybinding so you get the best of both worlds.

[@TonoNamnum]

Alt+arrowUp or Alt+arrowDown will shift the current line of code up or down. This is better than cutting and pasting. If you hold shift down with the same command you will place cursor down or up in multiple lines.

[@hvitserklothbro8298]

how to move line of code to the right and to the left? i spend lot of time to move my line of code one by one

[@mateusz2099]

@@hvitserklothbro8298 you can select lines and move them right with Tab and left with Shift+Tab

[@jijojoseph2041]

Type ctrl + shift + p And type keyboard shortcuts. This would open a pdf with all shortcuts

[@AnkitTiwari-lu2tt]

Best

[@vincentmontano4518]

And look for Help: Keyboard Shortcuts Reference

[@tvguideondemand]

Or do control + k + s to see keyboard shortcuts.

[@NomanKhan-pj3qx]

Awesome.. Thanks

[@forhadrh]

OP! :D

[@kartikeyjangir6003]

Man you added meaning in my life by telling about ctrl+enter and CTRL+Tab 🔥🔥🔥🔥 thank alot

[@Pulpdood]

Cmd+D has helped me a lot when refactoring code by selecting each instance of a word and I can change all instances at once

[@arezkimezrag4742]

i used sublime text for years before and now i'm using VSC with Sublime text Keymap and Settings importer extension . It helps me a lot. Thanks Brad great video

[@LeoPacheco87]

Great video! I usually use alt for tab travel too, u can go alt+1, alt+2, etc for quicker tab change!

[@daniel71626]

I gotta wach this when i have time. Im using vscode almost every day, and it is good to know more shortcuts.

[@tannercampbell]

Thanks Brad this is nice! Not sure if helpful to anyone else but you can map your own shortcut to collapse all folders in explorer. I find this to be one of the most used shortcuts for myself, especially when working with large frameworks and libraries like Laravel and Angular.

[@dwaynegenx72]

Brad is a mind reader! I was just looking for a tutorial like this the other day.

[@igorskyflyer]

Press F1 for even easier Command Palette invocation. 😉

[@sycoraxgriotsstudio5505]

- Select a word and Cmd+shift+F find this word in the entire workspace, very useful when you want to know where this word is used.

[@drum-computer]

Nice fact that you can use command+shift+t the same way in chrome browser too. Also I love to navigate through tabs in vscode with cmd+page up/page down it simply selects next/prev tab -also works the same in chrome :)

[@aloudia]

Thanks Brad, made my weekend. A very useful content.

[@LukeLoves]

One I have recently found and started using every now and then, To retract all functions = Ctrl + K + 0 and to open them all back up = Ctrl + K + J

[@maria-lm8ze]

i like to use the multiple cursor editing, it's like the one you showed but without having to click, you just ctrl + shift + up/down. But it needs to add "editor.multiCursorModifier": "ctrlCmd" to the settings

[@eddiejaoude]

Thanks for the tips 👍. CMD + j, to open the terminal panel at the bottom also

[@theJuanon]

thanks

[@Speedy4you10]

@Traversy Media. Thank your for sharing us all your tutorials. They have been really helpful to me. You offer the best html, css and Javascript videos out there.

[@abdullahseba4375]

These are great! F2 is also useful for renaming variables.

[@ablanchi]

You should try the Vim plugin for VScode. You're basically already there with all these shortcuts, but using a modal editor allows for sensical shortcuts. y for copy, p for paste, w to move word by word.

[@prabhakarmishra2182]

Brad I am not bragging but you are a gift from god

[@erik....]

Alt+Shift+right/left was new to me.. Very nice!

[@its_magnetic]

Thank you Brad, love ❤️ and respect 🙏 from Sikkim India 🇮🇳

[@abnerssouza]

Command + D or Control + D to actually select an entire word where the cursor is. Instead of doing Cmd + Shift + left or right arrow. :) Amazing Video

[@tahwnikcufos]

I don't even own a Mac or memorize a ton of shortcuts, but I'll watch a Traversy video, while I program my Stream Deck for VS Code ;-)

[@cleophasomwenga1833]

I cannot forget where you have brought me from, I will keep on supporting you where I can. I knew you this year May, so far have benefited a lot. Be blessed

[@Kanol77]

Thanks! Very helpful video mate! 😎

[@DevInsideYou]

Ctrl+K, Enter promotes a "preview" to a "tab".

[@TheCodeRank]

I really love coding after inspire from brad traversy i create my first youtube channel

[@ridl27]

900k for now, congrats, Brad =) hopefully you and your channel will keep growing.

[@amkj96]

On Windows, you can scroll up or down in a file using Ctrl + Arrow key Up/Down 😀

[@kjn5991]

There's just one thing, on Windows (and probably Mac too) there are different layouts in different countries. for example, on my keyboard I can't do Ctrl+` to toggle terminal because the " ` " is behind Shift+Alt Gr+´ combination. On my Finnish multilingual layout I had to configure the settings to toggle terminal with Ctrl+ö

[@unclefreddy2009]

Thanks so much for this, I’ve been trying to use Atom just because another channel I like uses it a lot (EngineerMan) but I see how productive you are with vsCode that I’m going back to it. Love the channel and content, have bought several courses.

[@mayank_upadhyay_19]

Today my friends, I have taken the responsibility and decided to not play with mouse anymore. Thankyou Brad ♥️

[@AbhishekVerma-kj9hd]

Awesome man just the thing I wanted to know

[@__jake.m]

Thank you for the useful tips! ☺

[@georgestatefield]

Thank you for sharing, Brad! Nice and helpful video!

[@oakleyorbit]

Dude yes I’ve been waiting for this! Thank you!!!

[@Strasbourgeois]

7:00 when you create a new file, you can select a language with Ctrl+K M

[@Neerajkumar-xl9kx]

helped me a lot . thanks

[@realchrishawkes]

Nice

[@rosselliot8971]

Thing I recently discovered is when you select multiple occurrences of a string with ctrl+d, it highlights the whole word/s, and when you start typing the entire word/s is replaced. That's often what you want, but you can actually move your cursor left/right within the word and edit individual characters which is also often what you want.

[@JoeWong81]

Great video Brad

[@diproy9363]

awesome shortcuts! thanks

[@samuellucas7049]

Thanks bro. 😍 happy new month!

[@7s9n]

Very helpful video 💛

[@DanteS7]

Pressing F2 will rename a variable/function/tag without having to select all occurrences with Ctrl+D (if it's different search for "Rename Symbol")

[@maheshhbhat]

Thanks so much. This was super useful!

[@MakeAppswithDanny]

Thanks Brad! I use Sublime, but you just made me realise I could control the sidebar with the keyboard for the first time! 11:34 - R.E. the comment shortcuts - it's worth mentioning that you can also *un*comment a comment with the same shortcuts

[@balancemode2228]

Thanks so much for the indispensable tutorial.

[@Corei7100]

Thanks Brad. I needed this one. I am also new to web development.

[@MarouaneKassraoui]

Hello I want to help How to return the vscode interface first Because I pressed the ctrl +} button and the interface became very large

[@mlshenhua1]

Thank you for your Gist With Shortcuts, it is helpful to review.

[@Ozeki_Negima]

Great video, helped out!

How to configure keyboard shortcuts example in Dreamweaver I made the combination CTRL + B = or CTRL + P and in VSCODE you can configure keyboard shortcuts both in html files and in php?

[@XxMrBryanxX]

Thanks so much for this video! It helped immensely

[@ProgrammingwithPeter]

I'm a phpstorm user but I used all of the editors(almost), VSCode is good for an editor but i find that productivity is better with an IDE(since php storm is fully customizable too, i'm using less mouse than keyboard)! Great video Brad!

[@ilyesmilyesm2576]

but it's expensive x))

[@ProgrammingwithPeter]

@@ilyesmilyesm2576 Usually companies give licences to their developers, if you are a student, you can use it for free and let's talk about things that makes you productive, if you are productive with it to get another project in a year, from which you get 200-300$ would you pay 160$ for it? Not sure how much is the license today, but it's worth it!

[@ilyesmilyesm2576]

@@ProgrammingwithPeter I am student, how can I use it for free?

[@ProgrammingwithPeter]

@@ilyesmilyesm2576 search jetbrains student pack

[@ilyesmilyesm2576]

@@ProgrammingwithPeter ok thank you, I'll try it

[@devmanage6464]

Thank you @brad sir.. Very helpful. :)

[@ErrorDebug]

Congrats on 900k

[@drawnofmymind8425]

Brad you are my hero!

[@algumnomeaihehe]

my man really did record himself reading documentation

[@howardrkennedy]

This really helps🥰

[@heroe1486]

Best advice : Arch wiki + install a twm if you want an efficient keyboard centric workflow. Unless you live inside emacs there is no way macos/windows can be as efficient as a twm

[@dronenb]

This is a great video!

[@TheDvand7]

Love the videos! Could you do a tutorial on hosting a node application on web server? Either way, thank you!

[@TraversyMedia]

Daniel van den Akker i have one showing you how to deploy to digital ocean with ssl. Look back about a month ago. I have one with heroku as well

[@2242824]

Brad, in which video do you talk about the reason you've switched from Windows to MacOS?

[@lilianaramonaparaschiv8497]

in sidebar, u can open and close folders w enter

[@hsumyat1265]

very useful ! Thank u

[@falilou_io]

Thanks Brad, you really help us a lot. Now, can you make a video about that code and explain it, please. I just finished you Modern JavaScript course on Udemy and I need more practice.

[@f3-faithfitnessfinance]

Thank you for this❤

[@dayibdesign1686]

Good article Thanks Brad.

[@dambooseriere1143]

You are the best... Thanks..

[@herman751]

This is just deep fried Vim. Learning Vim will pay off, VSCode also has good Vim extensions.

[@riskzerobeatz]

Great. So useful. Thanks!

[@BicospaceTech]

i did learned a lot from you man, thank you :D

[@oghenefokethompson7407]

Nice Mr Traversy

[@vanvothe4817]

Thanh Brad because the videos is very good! I follow you

[@manishbothra9387]

If I'm using a function from another file and I want to directly jump to that function definition. What is the shortcut key for that?

[@RogerHolden]

Navigating to content in an HTML doc seems impossible with the keyboard so I have to use the mouse for this (and have had RSI before) - any suggestions?

[@duckyeah896]

you can use F1 as well to open command Pallete.

[@mmbower1]

Much love Traversy!!!

[@DeveloperIbrahim]

how to move cursor in visual studio code end to the closing HTML tag ...I tried a lot but can't fine it..

[@Neworldexport]

CTRL +Shift + F -> search for text in the whole workspace

[@rahulvalder6581]

This is most needed video for me. Thank you for this Brad. 💯🙏

[@fransdehaan2916]

How can I move over the last } of a if statement, my cursor is after the ; on the line before. And I can see vsCode highlights the { and } if (1=1) { printf("test"); }

[@FinanceWithSEA]

How can I set Enter as a Run code short cut?