Top 20 VS Code Shortcuts

[Music] as a developer the less time you spend on your mouse and the more time you spend on your keyboard the better off you'll be in this video let's look at 20 shortcuts that you need to know in vs code hey everyone if you are not familiar with who i am my name is james q quick and i do web development tutorials on my personal youtube channel at james q quick as well as the auth0 youtube channel auth0 you'll have links to both of those down in the description below but that said i say we go ahead and dive into the actual shortcuts here now i do want to kind of reiterate why shortcuts are important for your workflow and the idea is that if you're taking your hands you maybe can't see all this interaction but you take your hands they're on the keyboard you move them over to the mouse you move them back it takes seconds or even parts of a second to do all those things but as a developer with us being on our computers all day that back and forth i really can slow us down even if you take a second here there that can add up to minutes and hours maybe over the course of a year so it's really important with the more experience that you get to keep your hands on your computer because you can be incredibly powerful with just using shortcuts if you have any developers out there that are using vim a lot of them use them because you can do everything from the keyboard it's really really hard to learn it's really tedious and it takes a long time to master but it can be really beneficial for that exact same reason so that is the why you want to keep your hands on the keyboard and we'll just go ahead and dive into all of these 20 extensions in visual studio code all right so i've got open the code for my personal james q quick site and the code is not really important it's just something to be able to show off these shortcuts with so the first couple of shortcuts i'm going to show you are for really optimizing the space in your editor so shortcut number one is to toggle your sidebar so the sidebar over here if you open it shows a lot of useful information one is the explorer where you can see all of your files something you probably want to see fairly often but when you don't want to see it you don't necessarily need to come and click this thing up in the top left what you can do is use the shortcut of command b and i'll i will list the shortcuts on mac which is command and then something you can translate that to control and something on windows so in this case the sidebar toggling it open and close is command b on mac and then ctrl b on windows shortcut number two is to toggle something else and that is your built-in terminal so i use the built-in terminal in vs code a lot i can go in here look at my files i can run my servers i can do whatever i want i use the built-in terminal all the time in vs code but what i do is i toggle it away when i don't need it so this is actually control tilde on both mac and windows so ctrl tilde will open and close or toggle close or toggle open the built-in terminal in vs code again to give you more space to actually see and write your code number three is how to get to your user settings so you can come down to this cog wheel and you can click the settings bar here and then you can see all of these settings of vs code which settings in vs code are amazing by the way but you can do this one step simpler with doing command comma or control comma on windows and going ahead and opening that up directly and then i can come in and change whatever i want to one of the cool things about vs code is when you change anything in here it takes place almost immediately so as i change the zoom to four it zooms in i probably don't want that but these things take effect really quickly so being able to get to your short being able to get to your settings really quickly using the command comma or control comma shortcut can be really useful number four now is going to be how to quick open file so if i wanted to open a file i could come over to the file explorer and i could look for blog.js and i can click and open it but i never do that in the real world i never do this in my day to day stuff what i do is something called quick open so this is command p on mac or control p on windows and what it does it opens the list of my files it then gives me the ability to search through my file so if i wanted my courses page i could type in courses and then press enter it will open that file for me all saying on the keyboard i can open any of the files that i need as a developer i usually know the name of the file i'm looking for so i can just type it in if you don't know the name that would be maybe the one use case to come over and actually click on a file from within the explorer other than that i always use the quick open with command p or control p on windows number five now is the ability to toggle through or tab through the files that you have open so notice i've got five files here if i wanted to go to newsletter for example i could come up and click or contact or contact form but what i do is i use control and tab to tab through these things similar to how command tab on a mac will let you toggle through applications control tab will let you toggle through your different files that you have open so this way if i want to go from courses to newsletter i just control tab twice and i'm to newsletter and i know that the last file i did was courses so now i know it's one tab away it takes a little bit to get used to this but i almost never go up and actually click a file i almost always use my toggle through with control tab and if you add shift into that so ctrl shift tab you can toggle backwards so you can go forwards and backwards to be able to get to whatever file that you want which is already open number six now is how to take a file and put it in a separate pane or into the split editor and what i mean is i can manually drag a file over to the right and leverage the split editor in vs code but clicking and dragging is not optimal so there's a shortcut for that as there is with almost everything and that is the command or control and backslash and that will automatically take that file over to the separate pane the one thing i wish happened is that the original file would close because if i take it to one side i probably don't need it on both but it works really well the split editor is really cool you can customize this grid in any way that you want to you can do an actual like grid by dragging something to the bottom here if i grab the file itself and drag to the bottom then i get this kind of gradient you can customize that in any way that you want it's really really cool so to bring one of your files to another pane is command or control and then your backslash all right next up is the ability to close files i never come up and click the x in here i use command w or control w so command w will just close that file really quick and easy and i never have to touch the mouse to do it so i open files with quick open with command p or control p and then i close them with con command w or control w all right number eight here is a search and replace inside of a file so if i i want to search for the and keyword i can select it and then i can use command f to be able to open up the search and replace i could jump through these searches now that i have it open or and or i could add a replace and do that so what i do is i will select a word let me get rid of this to show you how it works i would select a word and instead of doing command f i have set up to do command h which will go ahead and trigger the replace what this means is command h will populate the search field with what i had selected the and and then it will automatically take me to replace where i can do this and then from there the shortcuts to go ahead and do all the replacements is command and enter or control and enter so in this case i can go ahead and do all those replacements with just two shortcuts one to open up the search and replace and the other to actually do all the search and replaces these are really powerful once you learn how to work with them and kind of put them together for searching and replacing inside of a file and that leads to number nine which is to do global search and replace so very similar here if i select the word and let's get rid of this one if i select the word and and then do command shift or control shift f that will do a global search and you have the ability to do your global replace as well for me it is command shift h we'll do that global replace go ahead and take me down here you can see all these changes you can open them to see what it's going to look like and then you can change them here so you have the ability to search and replace in a file as well as globally inside of the directory that you have open number 10 here is a very special one and it is kind of the the source of all truth or the ultimate command the command to rule them all and that is the command palette so command palette is command shift p and what you can do from here is run any command that you want to so if i wanted to close the side bar i could run that command from here instead of using the shortcut so if you ever forget what a shortcut is or if you ever forget exactly what a command is you can open up the command palette you can start to search it if i was something with github and you can go down and run that specific command this is your fail safe if you ever forget if you ever need some assistance open the command palette and and try to search for what you're looking for most likely you'll be able to find it and then you can run that command from right there all right now let's get into some shortcuts with navigating or working with your actual code so i'm going to come up here and this is going to be number 11 here is to comment your lines or to toggle comment your line so i'm on this line here and command l or control or not l slash command slash or control slash will toggle comment this line so not only can it do it for one line if i select multiple lines so i select both of these it will work on both of them as well now the last thing i think that's really cool about this is i'm inside of react world here jsx if you're not familiar with that that's okay but commenting in jsx is a little different than regular javascript comments but vs code already knows that it's doing the specific type of comment that works for jsx this is so cool to me that vs code has this awareness to toggle the comment in the appropriate way for the given piece of code that you're working on within a given file number 12 now is some tips on how to navigate your text so if you want to if i wanted to add this header or edit this header class here and i was on the left side i could hold down the right arrow and i could get all the way over here but that's not very efficient so if you hold down option and do left or right that will allow you to skip word by word instead of character by character this is really nice you can also on mac hold down command and go left right to get to the beginning and the end of a line so if i wanted to edit that header i would probably go all the way to the end and then come in one and then maybe hold down option to get to the beginning of that word and now start to type whatever i need to i can't tell you how useful these are think about how much time you spend navigating the text inside of your code now you should be able to navigate a little bit faster now on windows the home and end buttons will get you to the beginning and end of a line and one last thing on mac if you hold down shift and command and go up or down that will take you to the beginning or end of the actual file itself i think control and home or control and end will get you to the beginning and end of your file on windows as well all right number 14 here is how to copy cut and paste now this is kind of three shortcuts for one but these are probably ones that you're familiar with so you can select a line i could copy this line with command c or control c and then paste it with command v or control v sorry i got some weird formatting there so those are probably ones that you're familiar with you probably or maybe you already know the ability to do your cut as well so i could cut this line from here with command x or ctrl x and then maybe i want to paste it up here so now i do my command v or control v so that works really well the one thing i'll add here is that you don't actually have to select the entire line what you can do is just be on that line and now i can copy this one go down to a new line and paste that one as well again some weird formatting there so you don't have to select the entire line if you run command c command x or control c control x for cut or copy on mac or windows it will select the entire line by default vs code will do that for you which is actually pretty neat now a similar one to this you saw me kind of copy a line and then paste it again if i just want to duplicate that line i can hold down option and shift and be able to duplicate that line by doing up or down on the keyboard and i can do this as many times as i want probably not that many but to be able to duplicate a line hold down option and shift while you're on that line and then up or down it will make a copy of that line another really really useful probably one of the most useful ones is multiple cursors and you can do this by holding option and clicking to get multiple cursors and then i could come in and change all of these to a p tag for example if i wanted to all at one time but that still requires being able to click with my mouse so if i'm here i can hold down command option shift or control option shift on windows and just do down to get multiple cursors on this line same sort of capability i can now replace all those lis with p tags that doesn't really make sense but i could if i wanted to using multiple cursors another nifty one here is if i'm inside of a word for example and i want to double click on this word to then be able to search it well you don't have to double click if i'm inside of this newsletter word command d or control d will actually select that entire word so here's james and then select or quick and select and then that would automatically actually update your search if search is open with that text that you selected so you can select that entire word with just having your cursor there and then doing a command d or ctrl d to select it tip number 17 here is to take that a little bit further where if i select the newsletter as a word now i can also do command shift l or ctrl shift l that will select every instance of that word and then give me multiple cursors to edit that word so if i wanted this to be newsletters instead of newsletter i can now type in my s and it will update in every instance of that word it's actually really really nice and really powerful to be able to do this now there's a shortcut even on top of that that makes renaming something even better let me get to something that has a little bit of javascript in here so you see i have my error message property here so if i wanted to rename error message in every location that it's used i could do the trick that i just showed you but i could also uh click on this word and then do function two so f2 this is the rename symbol allow me to rename this variable in every place so i could type in error message and it's going to now replace that everywhere that it's referenced now vs code did a little bit of intelligent stuff here where it knows that this thing is actually error message so it actually renamed it here instead of just like replacing the name if that makes sense but it did the equivalent of exactly what we want where it's going to be now error message down here instead of err message so it did that global or not global but inside of my file it updated the name of that variable in an intelligent way so that now i could reference it that way through the rest of my code all right 18 is to be able to jump to a function definition so if you see my handle submit function here this thing is referenced all the way down in the on submit and if i wanted from here to go and look at that function i'd have to scroll all the way up but you can hold down command and then click to get to that function definition you can do this with any sort of function that vs code knows about to be able to go and see the actual function definition look through it see what it does anything that you need command and click will take you right there all right number 20 here is our final shortcut and i wanted to leave you with a little bit of zen in your vs code development so this is the zen mode shortcut to take you into zen mode where it will get rid of all distractions inside of your vs code editor and what this is is command k and then z so command k and then z will take you into zenmo it's a little weird you do command k or control k on windows you do that then you let go then you do z it'll take you into zen mode no distractions no fluff no bezel in vs code just your code so you can really focus and then to get out of it is the exact same thing command k and then z to toggle open zen mode all right so those were my top 20 favorite shortcuts that i use in vs code every single day i'm curious if you think we missed some let us know in the comments below what are your favorite shortcuts that we might have missed thanks as always for checking out the video if you enjoyed it make sure to give a like subscribe to the channel all that stuff on typical youtube videos thanks again for checking it out and i will see you later

Channel: Traversy Media

Views: 69,669

Keywords: vscode, vs code, visual studio code, vs code shortcuts

Id: 4xA5JePvCJc

Length: 17min 0sec (1020 seconds)

Published: Mon Nov 23 2020