VSCode Keyboard Shortcuts For Productivity

Let's look at some keyboard shortcuts in VSCode to increase your productivity and coding speed

Gist With Shortcuts:

💖 Become a Patron: Show support & get perks!

Website & Udemy Course Links:

Follow Traversy Media:

[vincentandrieu]

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

[vishnyo]

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

[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!

[scottdunbar]

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

[Parthsean]

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.

[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)

[dwaynegenx]

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

[Speedyyou]

@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.

[chineduknight]

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 😊

[oakleyorbit]

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

[unclefreddy]

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.

[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.

[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.

[arezkimezrag]

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

[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 :)

[ridl]

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

[ivanskubko]

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)

[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 :)

[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

[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.