Pro VSCode Tricks

hello everybody my name is Harry wolf welcome back to my channel today is going to be a very fun and exciting episode one that I have been collecting the bits and pieces of this episode for the past couple weeks and months also developing these skills over the past couple years a very arcane and dark science which is the professional vs code tricks some pro tricks for being the most efficient user with us code I'm going to show to you some of my top tricks that I use everyday whether I'm coding or simply using BS code as just a text editor these are my go-to tricks that make me the most efficient user of BS code without further ado let's delve in into what they are the first thing that I want to talk about with you is navigation shortcuts this is navigating BS code itself the two that I use a lot is opening up the sidebar over here and the bottom bar over here so these two shortcuts I use a lot just to have it helps me jump in and out of focusing on the content at hand so with command B that opens the sidebar opens and closes it very quick very very nicely easy command B back and forth I use that all the time then command J to open the bottom drawer command J open close the bottom drawer so again if I want to chuck in and out of things makes my life a lot easy also what I use a lot is control tilt control tilt will actually jump open up the bottom drawer and open up the terminal so if you're in the output section and there's shortcuts for these too but frankly I don't use that much I don't care but if I do use the terminal so I can actually do control tilt control back tic and it shows me right into the Eternals that can actually do things right here and again I can do command B to close that up command J to close that the two other ones that I use is command shift E which opens up the Explorer hence the e which opens up the sidebar here and then command shift F to open up searching for all so I can do a global search if I want to and then one that don't use as much as a control shift GE to go to the version control that one's a little bit awkward to use my hand with so usually just use the mouse but I could if I wanted to but again command shift e to go the explore command shift app to or define I use those all the time then of course command B to close it the best way to get used to these things it's just to like take one and just practice it and see if you like it in your workflow the other thing that I use a lot is this extension that I have called project manager and you can actually invoke project manager with a command option P and this opens up a list of the projects that I am actively or semi actively working on so for example like my YouTube stuff I can click on YouTube cancel list you actually do this when you I'm actually gonna copy that I'll say sure let's go to YouTube don't see it for now it's gonna swap and then I'm in my YouTube project so nice and easy to hop in between things in there and of course I want to go back to the website right there and there it is okay let's bring that back wonderful that's project manager another big thing that I do a lot and actually just swap this out into the bottom over here and you'll see why in a second so the next thing I want to talk about is my selection hacks my selection hacks are some of my most prized pro-v Oscoda tricks that I use every day even for code or not for code I use these hacks these tricks these pro moves selection Pro moves let's do that instead selection Pro moves I'm gonna make this into a blog post which is why I have this outline here selection Pro Moo's makes me very efficient to update a huge body of text so the first one that I use a lot is this command D to select multiple words so for example let's say I want to change the arguments that I have in these three create note fields you know you'd have to do like foo right to do all this stuff otherwise and this is very slow and inefficient and I hate being inefficient because all we have is times the better I can save time here it makes all of us but actually I can do is I can click on one thing like a common text node you can see that these things are highlighted but they're not actually active live it like if I move my my keyboard my cursor they just go in and out so I'm gonna select that again just like that then I hit command D what that does is it expands the selection of that same piece of text so I hit that again it's gonna expand that down there again you say three blinking cursors right here and what's awesome about that is that I can now move my cursor and they are in the same place everywhere so what I can do is easily add a new argument in every place so I just tripled my output by this one simple trick command D it is the best thing you have to play with it to understand kind of how you can use it when you can use it also you can do from there is some natural keyboard jumping shortcut that's just built into Mac itself I think it's also in Windows with a little I think might be like you know Windows key or something like that but let's undo so let's say I want to actually have all of these be the same and I wanted to have all these functions be the same function because I've now abstracted them I want them all to be like you know create thing so I have all these be great thing all these other things and it's I can't do that so I select control if I just select the create word and I expand it and getting some false positives here things I don't actually want to be selected so I can do instead is find the common element that is common to all these things like great page expand the selection there then actually I can you go up in my cursor and here I can start editing this and this jumping the entire word is by holding option going left and right on the keyboard this is what I use a lot to option I don't know the heuristic of it but it just jumps full words so I could actually hold option and shift and hit right and that will select all those lines of text so again go over what I did I'm taking crate page command D command D and then I can go up and then the question is how do you select this you can go options the left that hold option and shift shift select something whole to the right and now I have all these things there that can then say create thing hopefully I listen to fast I've practiced this over many years makes me much more efficient writing code another thing I've this actually this this is a that brought over functionality that I had in a sublime text to the S code called multi-line Shrek's plugin where's extensions multi-line so this extension right here and this is another wonderful multi-line extension that saves me a lot of time I mean even here let's say I wanted to you know change have these vehicon prefix of thing right there's I don't know what I could select before I could easily select these it's like go over here like this what I can also do instead with this little plug-in is I can actually hold shift go down select all those lines then hold I think it's ctrl shift L nope nope it's option shift L which from those lines adds a cursor here so for all those lines I can hold command to go to the front of the line go over and say to do another example of this I can let's say I want to change all the arguments here to be different I can again hold shift go up up select all that option shift L and now I have a cursor on every line that can then do whatever I want with it I think you can also if you want to do like arbitrary multi crosser arrangements you'd actually hold command and click no is it option okay so don't use this one as much yeah option so you can actually option click to put your cursor wherever you want then you have the option to it say whatever you want Multi cursors is a very professional pro move that I would encourage you to take the time to understand how to use it to the best of your ability because it will just save you so much time over the long run it's a worthwhile investment by far okay got these things cool so let's talk about the a built in the version control system in this case yet some of the things you can do would she not be might be aware about is let's say I have this node node nope let's do this so I can select the node with the comma so I can get those common selections I can say a banana is fun and you know of course you can go here let's let's say that file shows up in here I love this this is a great way to actually review what you change while you're working on it and sure you have all these things here where you could actually add the entire file like staged that entire file let's say you actually want to stage one part like you're working on this file you only want to save one aspect of it you can go into this file here click this green line and I'll show you the change and you can actually staged this line individually like that so now if I look in the hip over here I can see that this is only a diff of that one line and I unstaged disc all those other lines so you can actually very easily sculpt the commit you want to add to get you can do this in the command line I find it to be much less pleasant this is wonderful included with this also let's say you have this one line here you could also revert it so just one reverted there and the visual control system in vs code is wonderful highly recommend using all of it easy prototyping is one that oh of course the command palette this one is I had learned IntelliJ at work and I was like where's the command palette because this is what I live and breathe on habit on how to learn new editors thankfully Intel if he did have it it was like command shift a to invoke it for vias code its command shift P to open D command palette if you are not aware of the command palette I am about to blow your mind literally everything that you can do with a shortcut envious code or even without a shortcut is accessible in this command palette so let's say I want to get the relative path of a file so let's go into here a new command shift P alt I've been relative and here I have this command copy relative path of active file and you can see there's this shortcut on the right so if I wanted to actually have this be a thing I use often I got to memorize these ship option command-c shift option command see that seems like I'm the on or dynamic thing to remember so I just remembered that this is a command that exists so I can hit enter and now I can go here paste that and that's the relative path of that file here if I want to do the absolute path full path path copy path yeah there's copy paths this is also great to actually discover what the heck abuse code can do do that here paste that and there's the full path of that file what's also really cool about this is that literally you can just explore all things that you can do in here and it does the same good fuzzy searching of commands actually like explore what's in there that's interesting too is that it gets me to leak this Ford brace it goes into the file look up menu so I can actually look up file so if you do command P to do a quick file lookup you can actually add the right bracket or right caret the heck is that symbol I know that symbol is to then go into the the command palette of course you can also dude : to go to a current line so I can go to line 100 right there whoops so if you want to give a huge file you can usually now maybe that so I can do line 100 let's do line 97 97 column 2 or column 10 and there's my cursor right there to go and not be it that way again command shift P just you know type in a random word file to kind of get an idea of what's in here like beautify file it's great you can do format file it is lovely definitely spend a lot of time playing with it it's definitely worth your while this is one that I use a lot to me to be using it right here easy prototyping if you only just like spin up a turn kind of like test around you can do command and open a new file plus we want to make a react component I'm just want to like you know prototype something this is kind of hard because like I don't have any autocomplete at all and it's hard to there's no syntax parsing it's kind of hard understand what's happening so you can actually do is open up the command palette type in language to change the language mode and then choose which language that this file should be in so in this case I want it to be JavaScript react and here we have the wonderful syntax highlighting that we all love and rely on you can also change this in here if you want to click on that button to see the entire list of languages that you have available in your vs code language it's also great for seed here you do command shift e language mood markdown so now I can have this before me I didn't markdown it's in there no syntax highlighting for me but I use this a lot as well especially when I have some PR and I want to just like touch something quickly I use this all the time it's absolutely lovely and last but not least my little pro pro vs code shortcut is the github PR extension where am I gonna have a repo that has a PR open I'm gonna go here for now we cantle need to save this leafy green leafy green is a open source UI kit that I'm developing at work I'm using it for example purposes here because it's open source you can see it it's online what's cool about this is that I can actually show you how this get a PR thing works where you can actually build this extension expand this to see all open PRS and then you can get you click on to a PR it's for there's this new PR to add this new component to the UI kit and I can load it up I can see you know who's reviewing it the text everything like that and what's most cool about this what's most cool about this is that you can actually click checkout and be ESCO will actually check out that PR branch locally and then go into this checkout mode this review mode where you can actually then see the local files here so you can see all the files here you can open it up and you open it up you can actually start doing comments in vs code if I hit add comment that's gonna show up in github itself and what's also great about this is if you actually want to play with a code locally then you can just literally just open up the terminal and start doing yarn start actually sped up everything and actually play with those changes locally and then of course when you're done you can go back and say exit review mode and you're right back to the master where you were before literally my took me a long time to understand why it's so great and since I have I rely on it so much it is so good so to recap my pro vyas code tricks I got some navigation shortcuts which helped me day in day just to make sure that can focus on what the task at hand project manager to manage multiple projects at once and make it easy to jump in between them that's an extension also by the way it's an extension selection Pro moves definitely practice those to learn those that will save you so much time of the long run even taking a week just like kind of learn multi selection tricks saves you so much time oh I forgot you forgot a trick one that's really cool India's code you can actually put a cursor on a line and do command X to a cut and it'll cut that entire line and you can of course command me to paste it and when I find that very helpful so I if I wanted to leave a lot of lines in succession I can do commit X X X X X and that's all gone but I'm not gonna use that cut text it's just gone but it makes it very easy to like delete an entire line so I use that a lot worship with that under when laying with that be selection Pro moves sure let's do so we quickly deleting a full line quickly deleting a full line with command + X it also makes it easier then refactoring with things around if you want to because you can kind of just yank and pull things everywhere also what's a good trick is a shifting lines up and I forgot about these tricks almost forgot about them if you hold option on the line you can actually hold option and then go up or down to actually move where that is and this works like anywhere so I could actually have this swap that order right there with holding option on that line and up or down and that just swaps the order entirely so you can just go up like that you also see that with a multi selection so actually select this I can actually select all this and then just move it all the way down like that we like that a lot of fun holding an option and I can hold shift to go all the way up hold command go over there all the way down just like that huh okay that's it shift line up and down with option and down use the built-in vyas version control system editor it's lovely the command palette live it breathe it easy prototyping to just open a file with an extension and use that github PR extension another extension that is awesome thank you for listening to this I've been very excited at this video for a long time so don't I do share it with your whole network making sure that we make everybody as much of a pro because code user as they can be I'm curious to hear about the tips and tricks that you use daily I'd love to hear what are the things that give you the biggest productivity boost as well leave your comments in the comment section that's what it's there for if you're not already a subscriber become a subscriber to get more content like this I have a patreon account if you'd like to become a patreon patron a P P for short and I'll see you again in the next video

Channel: Harry Wolff

Views: 15,041

Rating: 4.8834243 out of 5

Keywords: vscode, tutorial, shortcut, pro

Id: l4ANg098TlI

Length: 19min 2sec (1142 seconds)

Published: Sun Dec 08 2019