Code faster with these VS Code shortcuts

imagine the number of times you go back and forth from keyboard to Mouse in the course of a day to copy and paste search through subfolders or scroll through your files it might take you 5 Seconds which may not seem like a lot but if you do it 500 times that could add up to 40 minutes of your day gone but if you could cut that down to a second those 500 actions would only take 8 minutes but how well if you read the title of this video you know already shortcuts today I'm going to show you 12 gamechanging vs shortcuts that'll speed up your coding so let's get into it to start off here are a few ways that I optimize my own user experience so I like keeping my VSS code display uncluttered when I'm working so I'll usually keep my sidebar hidden but if I do need to use it I can use contrl b or command B on Max to toggle it display to show it and then again to hide it when I'm done and you can do the same thing with control back tick to toggle the display of the integrated terminal now aside from the UI stuff here are some shortcuts that will help you navigate your files a lot more quickly when you're working in a codebase that has a ton of files it can be pretty annoying to have to search through all your folders and subfolders just to find the one file that you need but if you know the file name you can find it much more quickly with the quick open menu so in the editor press contrl P to open the menu type in the file name you want and voila you can get right into the file to make your changes when you're in the editor if you have a real long file instead of scrolling with the mouse you can actually scroll with your keyboard by pressing control and then either the up or down arrow this one's super convenient especially when you just want to move a few lines further without having to move your hand to your mouse and back and when scrolling still isn't fast enough there is another shortcut you can use to jump to a specific element in the file again with a quick open menu press contrl P then the at symbol and it'll display all the elements or what they call symbols in the file then you can either look through the elements in the menu or you can type in the name of the tag or the class name that you're looking for to get there immediately now when I'm writing my Styles sometimes I like having both the HTML and SAS files open for reference vs code lets you split the editor into multiple panels so you can display more than one file at a time so with my HTML file open I can press control back slash to split the editor so we have a second copy on the right then using the quick menu with contrl P type in footer and now I can open the SAS file that I want so now I can make my style changes and reference my HTML at the same time and as a bonus mini tip when I'm done I can close the tabs I don't need anymore by pressing contrl W so these are the shortcuts that I use to get around files in VSS code more quickly but you're probably spending most of your time in VSS code actually writing code so here are some shortcuts that have saved me a lot of time when I'm typing away do you ever feel like some CSS properties just have really long names and it's annoying to have to keep typing them out even with the regular autocomplete well did you know that you can actually just type out the abbreviation of the words that you need and let EMT generate the rest for you for example instead of typing out display grid all you need to type is DG or instead of grid template columns you can type in GTC you can do this with every CSS property and value combination and it really saves you a lot of key presses and for even more speed you can combine this with another shortcut control enter it creates new line and automatically places your cursor in the new line without having to go to the end of the previous line and pressing enter this also works with HTML I can use EMT to create elements with classes or IDs and then press control enter even while the cursor is inside the tag to create and go to the next line so I can keep writing more HTML this combo is one of my favorites because it's increased my speed while decreasing my level of annoyance while I'm coding now one thing that might happen to you a lot as a developer is having to rename things for example all the elements here have the word hero in their class names but what happens if you have to change the word hero to say feature instead it is a bit of a pain to manually go through each element and delete and retype the class but with his next shortcut you can update them all at the same time if I select the word hero then press control shift L vs code will automatically select all matches of the word hero in the whole file then we can type in feature and it'll replace them all simultaneously however the risk with selecting all matches is that you might accidentally replace a match that you didn't really want to especially if you have elements in your file that have similar names to one another fortunately you can avoid this risk by adding matches one by one to your selection group with with another shortcut if I select hero again then press contrl d vs code will only add the next match to the group selection so this is nice because you can monitor exactly what is getting matched so you only replace the ones that you want now I do want to mention that I've actually customized the key binding for the shortcut to be control altd instead of the default control D I did this because I'm using control D for one of my most commonly used shortcuts duplicating lines of code so let me show you what I mean and how I did this duplicating lines of code can be really helpful I do this a lot in my HTML files if I need to make multiple copies of an element for example if I want to create a new section tag from the hero section but with a different name I can select the element then press the default shortcut shift alt down arrow to duplicate it however shift alt down arrow is a little cumbersome in my opinion so I want to change it to controll D instead so to change your shortcuts open your command pallet with control shift p type in keyboard and then go to open keyboard shortcuts and here you'll see a list of all the shortcuts along with their key bindings so the duplicate shortcut is actually called copy line down so if you type it into the search bar you can see that we have the original key binding of shift alt down arrow now to change it click the pencil icon then press the new key binding that you want to use I'm going to use contrl D and we can see that there's a warning telling you that there is an existing command using this key binding and this is because control d by default is used for that ad selection shortcut that we just talked about so we need to change that two so they don't overlap first let's press enter to save this key binding then we want to change the other shortcut so let's search for add selection and then in add selection to next find match click the pencil icon for that and then press contrl alt D and enter so now we can use our new key bindings to duplicate with contrl d then I can select the hero name in the duplicated element press control alt D and only replace the names that I want with the new class name another great combo that I use along with duplicating code is being able to move a line of code anywhere I want in the file I use this a lot when I want similar Styles in different elements or in media queries for example in this rapper class I might want to change the grid template columns rule for desktop now I could retype the whole rule in the media query using our abbreviated emit shortcut that I showed you earlier but sometimes I find it easier to duplicate the Styles and then just tweak the copy so instead of copying and pasting I'm going to duplicate the style rule that I need to change with with my custom key binding control D then I can move the duplicated copy wherever I need by holding down the ALT key and pressing the down arrow so now I can change the Styles in our desktop media query and we're good you can also do this with multiple lines if you select them then move them down and make any changes all right so that's it for the shortcuts that I love in vs code and if you're looking for more cool things that you can do in vs code you might like this video on how you can create and publish your very own theme this is how I made the theme that you saw me using in this video and I've linked it down below if you want to install it for yourself it's called coder coder dark and you can install it for free from the VSS code Marketplace

Channel: Coder Coder

Views: 267,127

Keywords: web development, html, css

Id: dLzMz2Jk_qU

Length: 8min 44sec (524 seconds)

Published: Fri Dec 08 2023