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
@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 🙂
@@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
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)
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.
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!
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
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.
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.
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.
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.
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 :)
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.
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.
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.
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.
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 :)
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
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.
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
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
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+ö
@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.
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
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.
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.
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.
Před 4 lety
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?
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 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!
The one I'm constantly using is selecting a bunch of code then Ctrl+K + C (hold crtl then press K then C, not together) to comment out the selected code.
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
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
Hi Brad, Thank you for presenting this video! One suggestion (not relevant to this video): see scrimba.com and say something about that website because it's an extraordinary platform.
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
Thanks. Both are life savers :)
On Windows: Ctrl+Shift+L and Ctrl+F respectively
where can i refer for shortcuts like core css codes directly. i am beginer !
@Jonathan Agree. I use f2 frequently and it'll change the name in all files that reference that variable. Super handy
@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 🙂
Select variable and hit F2 to rename the variable in every places where it was used
@@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
@@c1dk1n Never. Not even once. I use it every day.
Wow that is so powerful
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)
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.
Oh I love these HTML ones! Update tag is really useful also.
omg idk but *Ctrl+L* opens the terminal win below the ide for me n vsCode for some reasons.. 🤷🏾♀️
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!
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
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.
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)
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.
@@voidmind and if you want to select all instances of that word, Ctrl+F2 will do.
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.
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
@@hvitserklothbro8298 you can select lines and move them right with Tab and left with Shift+Tab
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.
Or have your cursor on the instance and press F12
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 :)
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 😊
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.
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.
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.
Type ctrl + shift + p
And type keyboard shortcuts. This would open a pdf with all shortcuts
Best
And look for Help: Keyboard Shortcuts Reference
Or do control + k + s to see keyboard shortcuts.
Awesome.. Thanks
OP! :D
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.
Thanks for the tips 👍. CMD + j, to open the terminal panel at the bottom also
thanks
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 :)
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
I gotta wach this when i have time. Im using vscode almost every day, and it is good to know more shortcuts.
Man you added meaning in my life by telling about ctrl+enter and CTRL+Tab 🔥🔥🔥🔥 thank alot
Great video! I usually use alt for tab travel too, u can go alt+1, alt+2, etc for quicker tab change!
This IMMEDIATELY made my life easier. I just DL'd the PDF and it's on my desktop
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.
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
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
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
Brad is a mind reader! I was just looking for a tutorial like this the other day.
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+ö
These are great! F2 is also useful for renaming variables.
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
Press F1 for even easier Command Palette invocation. 😉
Ctrl+K, Enter promotes a "preview" to a "tab".
On Windows, you can scroll up or down in a file using Ctrl + Arrow key Up/Down 😀
Today my friends, I have taken the responsibility and decided to not play with mouse anymore.
Thankyou Brad ♥️
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 ;-)
Alt+Shift+right/left was new to me.. Very nice!
Love the videos! Could you do a tutorial on hosting a node application on web server? Either way, thank you!
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
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
Brad, in which video do you talk about the reason you've switched from Windows to MacOS?
Brad I am not bragging but you are a gift from god
@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.
Thanks Brad, made my weekend. A very useful content.
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
I really love coding after inspire from brad traversy i create my first youtube channel
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.
Nice
7:00 when you create a new file, you can select a language with Ctrl+K M
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.
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")
Thanks! Very helpful video mate! 😎
Thank you Brad, love ❤️ and respect 🙏 from Sikkim India 🇮🇳
Could you do a tutorial on Payment using React.JS
900k for now, congrats, Brad =) hopefully you and your channel will keep growing.
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.
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?
Awesome man just the thing I wanted to know
Some of these can be used in Chrome too
Thank you for the useful tips! ☺
Hello
I want to help
How to return the vscode interface first
Because I pressed the ctrl +} button and the interface became very large
- 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.
helped me a lot . thanks
Alt + F4 is my favorite
Thanks so much for the indispensable tutorial.
This is just deep fried Vim. Learning Vim will pay off, VSCode also has good Vim extensions.
Thanks Brad. I needed this one. I am also new to web development.
Thank you for sharing, Brad!
Nice and helpful video!
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!
but it's expensive x))
@@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!
@@ProgrammingwithPeter I am student, how can I use it for free?
@@ilyesmilyesm2576 search jetbrains student pack
@@ProgrammingwithPeter ok thank you, I'll try it
Holding down command/control and clicking on function calls takes you to the definition or import location.
The one I'm constantly using is selecting a bunch of code then Ctrl+K + C (hold crtl then press K then C, not together) to comment out the selected code.
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
Dude yes I’ve been waiting for this!
Thank you!!!
Thanks dude, holy shit this helped me, the amount of times I had to change or find shit is annoying
Your logo is identical to the logo of an spanish phone company from my childhood, its called telefonica.
Gracias
Thank you for your Gist With Shortcuts, it is helpful to review.
Thanks so much for this video! It helped immensely
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
Thanks so much. This was super useful!
Very helpful video 💛
Hi Brad,
Thank you for presenting this video!
One suggestion (not relevant to this video):
see scrimba.com and say something about that website because it's an extraordinary platform.
awesome shortcuts! thanks
Thank you for this❤
My mostly used shortcuts are k, f and Alt + Tab for youtube for your tutorials :)
Thanks Brad
Guess no more clicking at the end and pressing enter lmao
Thanks bro. 😍 happy new month!
in sidebar, u can open and close folders w enter
You are the best... Thanks..
This really helps🥰
very useful ! Thank u
After CTRL + SHIFT + E you can open/close folders with enter key and open files with enter key not CTRL + DOWN/UP.
Brad, can you make a video or a series on making web apps using Azure or AWS..thank you, love your videos
Just an FYI for Windows to go to the beginning of a line its just home and end not ctrl+left or right
What ?! On Mac you need to use cmd+(up/dn) to close/open a folder in explorer ? On Windows, you just need to use left/right arrow key.
you can use F1 as well to open command Pallete.
Dear bro can you make tutorial for us about git and github basic to advanced. It will help us a lot, cause we love your video most.
Thank you. Very beneficial. In which language they created VS code?
Great video, helped out!
Thank you @brad sir..
Very helpful. :)
my man really did record himself reading documentation
Little correction: To add commentaries " cmd + / " (screen description).