My Favorite VS Code Extensions

everyone it's called in this video I want to run through some of my favorite vs code extensions but first they have to be a really annoying youtuber and ask you to please subscribe if you don't please like this video if you if you do but also if you don't just like it please it's really easy and turn on notifications if you want to be able to participate in future polls this video was one of the most requested from those polls so that's why I made it so if you'd like to participate turn notifications on leave comments try not to be rude and offensive and try not to bully me very much I've been spending a lot of time crying in the corner about my comments and I guess that's it huh alright well let's get started so some of you probably already know this I used to be really into sublime text that's what I told everyone to use I have jump shipped jumped ship 2 vs code Visual Studio code it's put out by Microsoft it's totally free it's cross-platform it's great for a bunch of reasons I'm not going to go into many but probably my favorite feature the the single thing it's better at compared to sublime text is the way you add and interact with extensions it has a great marketplace for extensions it has a GUI a user interface for installing them and removing them and pausing them highly recommend it so that's what we're talking about in this video extensions but actually the first thing I'm going to talk about is something that comes pre-installed you don't have to install it there's no it's not really an extension it's something called Emmet a lot of you are probably familiar with it it helps with creating HTML tags really quickly it's a nice syntax it gets kind of complicated honestly but right off the bat if you make an HTML file and you start typing simple HTML tags most editors support things like h1 tab will give you an h1 element but where Emmet comes in is you can do things like h1 well it's not doing h1 let's say I have a ul and then I want 5 list elements I can do Li times 5 and hit tab and it makes 5 of them so that's this really simple example but you can do all sorts of things with the syntax you can make child elements you can do siblings you can do something called climbing up you can also do grouping and multiplication which I just showed you here's an example of grouping this is not a video going into the detail of it I could probably do that another another time if there's interest but if you take this single line and we expand it we get a whole bunch of HTML very quickly as you can see okay so that's all I'm gonna say about Emmet again it's not a tutorial on it you don't have to install it but I use it all the time next up let's talk about the theme and icons that I like to use the theme I like is called material theme I'm not alone I think it's one the most popular so if you don't know how to install them stick extensions by the way it's this icon over here this is the easiest way you can do it all through the text and command line but this is way better so you just search for an extension or you can look at the recommended ones there's actually a website you can go to browse the most popular but it's called material I already have it installed but if I didn't have it installed I would just click install but this is not material UI that we're looking at right here this is quite ugly in my opinion sorry to the team who developed it so to enable it for me at least since I've disabled but I can click enable and if we look at the documentation there's a couple of options so there's a just show them down here it doesn't actually show it does it well there's a dark one there's this lighter purpley gray there's this gray greenish one I don't know if that's green at all a light color another dark one there's different variants but I'm gonna reload I've installed it now and you'll see that my colors change the background changes all this all this changes so if you want to change the one that it uses I believe it's command K and T there we go and it opens up this little drop-down and you can select from the available themes some of them are built in like Solarize I think and this one light Visual Studio o blinded there it's not so good but we can go to material theme darker darker high contrast I think the one that I nope that's not the one a pale Knight is that the one yes this is the one that I like let me just see if I also use the high contrast I think so okay so this is the theme that I like to use its material UI another extension I use all the time at least when I'm making websites mainly HTML and CSS heavy projects I use live server so live server allows you to edit and one and have it automatically update and refresh with every time you save in another window so here's a simple HTML file here's a CSS file actually they're not linked together oops let's do that now app dot CSS and if I open this up right now the first thing that's kind of annoying is that you have to go and find this file on your computer and double click it and I always hate doing that especially if you work in a bunch of nested directories so that's another reason I end up using live server it's just faster so I go to extensions type in live server and here it is I'm going to install it and you can read the documentation here whenever you install an extension you do need to reload the window or the workspace I think that's the terminology that use and I'm going to save and once I install it and reload the workspace I can go to an HTML file and say open with live server and it automatically opens it up in the browser the default browser for me which is Chrome it has a server started and I can see my code but of course what's most important about it this is kind of annoying let me shrink this down so we can see it is that as I change something let's say I change them to purple undisputed king of colors I save and everything updates so I use this all the time for a couple reasons I care you mentioned it will open it up that's nice and easy but also to have this live connection so you don't have to constantly save and refresh okay that's all there is to live server and to stop it just go to stop live server like that and we're done while we're on the topic of HTML and CSS one of my favorite extensions when I'm working with long complicated CSS files in particular is called CSS peek so what this does is it allows you to quickly jump from your HTML to your CSS either jumping to a separate file or a separate window or by popping up I think that's where the peak comes from popping up a little preview it's not even a preview that's the wrong term a little mini window that allows you to edit the CSS without changing windows so if we go to install it's it's called CSS peek else right there nowhere to go come back okay whoops peek with two E's I'm going to install it okay so finished installing I have a really simple demo here where I have an ID that I'm using and then a class that I'm using and then some corresponding styles so what I can do the first way of using this is to highlight or just select or I don't know cursor over one of the let's say the ID and if I want to see the corresponding CSS that is styling this element with that ID I can just type f12 and it takes me right here and my cursor is automatically in the right spot same thing with the class f12 and it takes me to the file so that's one way of doing it but what I could also do is open it in this little peek window where I still type f12 but also with option and it opens up this little window here I'm still in the index.html file but I can actually edit it so if I want to edit something about it I'm not just looking at the CSS I can fully change something so I could say I don't know border or something and save it and those changes would take effect without me ever leaving this window and then you can hit escape to get out of it so it's a nice quick way if you have like a 500 vine CSS file it's so annoying to scroll or to do command F to search for something this is really nice to jump back and forth ok that's CSS peak another extension that I really like it also has to do with color is called color highlight and it's really simple all that it does is it will take color RGB values or hex values for colors and highlight them with the actual color that they are so for example if I'm working on a project and I have a list an array of colors or I don't know I'm working in a CSS file and I have colors it's really easy to lose track of what is what so color highlight is going to highlight these colors with the actual color they represent so we can go and install it really easily I just do a search color highlights this is all sort of contrived because I uninstalled everything but anyway go and install and reload and there we go they're automatically highlighted now you can change how this works this can be a little overwhelming one of the options that I like if you open up the settings command comma or you go to preferences settings if you go to extensions color highlight marker type right here you can change it to dot - before which looks like this where just puts the color right in front that's the one I usually go with but you can also do what else is there background so that's the default outline a lot of people I see this one often it gets kind of annoying if you have colors stacked on top of one another like if you had something like this they kind of blend into one another so I don't like that as much but there's a bunch of options and so I definitely implore you is that the right term implore you to explore the different options my cat is jumped on my desk oh my god all right well she made quite the entrance there and exit so that's a color highlight it's really simple but I really get a lot of use out of it just because it's really not easy to keep track of these color values if you're not using variables if you're not using something like sass it can get very difficult and frustrating so I recommend it the next extension I like to use it's called bracket pair colorizer it's really simple but I actually get a lot of use out of it so it does exactly what it sounds like it takes your brackets and different programming languages and will colorize them so that you can match them so vs code already does this sort of highlight but I sometimes find that it's not ideal especially when I'm teaching it's not exactly that clear like up on a projector screen or something so if you search for a bracket pair colorizer there's a couple of them actually so you may prefer some of the other colors oh this is colorizer - actually that one sounds like YZ I've been using colorizer on its own without colorizer - I'm behind on the times so you install it like every other extension reload and then if I go back to this javascript file you'll see my brackets are now different colors so you can change these colors but this opening bracket up here closes down there and they're the same color and you get this nice line showing you that they match same thing here so some of you may not like this but I appreciate this because well for a bunch of reasons but when you work on a bunch of nested it can often be a pain defined like where's the corresponding bracket here especially if you're not indenting everything properly as you go often what I do is just ignore indentation for a little bit and then use a prettier or pretty fire to take care of it for me which is the next thing I'm going to talk about but before I've indented things I often find myself getting lost in brackets so the bracket matching is very nice oh and as far as changing the colors of the brackets if you open up your settings command comma or I believe control comma on a PC or just go to preferences settings under extensions here if you click on bracket pair colorizer and scroll down there's a couple different modes for how it does the colorization you can read about that in the documentation but if you click colors edit in settings JSON it takes you to the right place so if you haven't seen this window before the left side are the default values that you override so you can actually edit these colors but on the right side you can so I believe those three colors that it wants in my settings I have four because I was playing around with I am always tweaking these whenever I like get stuck with something in programming or I'm having trouble with a project I'll just decide to go tweak colors and play around as you can tell I don't really have a very nice quiet color palette I like to play around to things and I'm not really trying to say that this looks great but I just I don't know I like playing around with colors so it's bracket pair colorize or two colors make sure you add a comma in if you are overriding it over here so anytime we're trying to add a new settings that new setting this is just JSON so yeah we add that in and we override the values so these are the colors that I'm using and whatever I change this to if I cut this out and I just change it to be white you'll see immediately all my brackets turn white even in the settings file and if I go to my JavaScript file my parens my curly braces my square brackets they're all white so go back to settings here and put whatever colors you want in there and the order definitely matters as well you can see I have this blue color first and if we take a look on my parens and sort of top level brackets are blue and then the next nesting inside is this green color and then inside of that is this pink purpley whatever color that is fuchsia all right so that's how you can change those colors next up I'd like to talk about snippets so I'm not going to run through every snippet extension that I use because it really varies on what I'm doing so I'm just going to talk about the one that I use the most recently I've been doing a lot of JavaScript and some react so I used the es7 react snippet package so if you go to extensions if you just search for es 7 I think it should pop up right here it has quite the long title es 7 reacts Redux graph QL react native it gets cut off jas es 7 syntax typescript there's a lot of snippets in here and if you scroll down it shows you the prefix that you type and then what you'll get so some of these are just basic things like important exports creating promises I use that one a lot I really don't like typing this making actually this one is stupid to me the comment block you can do that a lot faster without having to remember that but then for react specific stuff I use these all the time there's a lot of boilerplate whether you know react or not and like in many frameworks there's a ton of boilerplate you type up for every piece of every component in react so there's a lot of this stuff that I just have memorized for example anytime I make a new component I type I M R C to import react up at the top anytime that I'm making a new component I want to add in a render method to it you can type r e n somewhere here we go and it does the empty render method for you there's a lot of these in here I don't really use react native very much but there's a bunch of these prefixes and you can explore them here the point is whatever you're doing whether it's in Python or Java or JavaScript or within some framework like angular or react there's a snippet library out there and it's probably going to save you a lot of time you might have to put a little work in like five minutes into memorizing the actual prefixes you need but I've installed this now no no I haven't that's a lie now I've installed it and just to show you some basics here's an empty file if I was creating a react component I would do RCC tab and it gives me this boilerplate where it imports everything creates my it creates my class and it also adds in the export default I actually sometimes like to do that on a separate line down at the bottom but anyway there's a lot of stuff going on here things that aren't react specific like I said promise that's nice and easy there's things like then create a then catch there's a bunch of them so I'm not going to go through all of them but I definitely recommend using snippets and learning them it's not enough just to install the snippets because you'll never actually use them if you don't take the time to remember or to memorize and then remember them later on okay so that's just my little note about snippets use them so that brings me to the last extension I'll cover which is called prettier now it is a pretty fire pretty pretty fire I think that's how you say it it a lot it format your code you can set the rules you can use the default rules there's a file you can set up that specifies how it should work so let me just show it to you first if we go to extensions if you just search for pretty come on there's a couple of them there's actually more than couple there's a ton of them I like prettier now honestly the reason I chose it is that the most popular one I had only 4 out of 5 stars and this one had 5 and this one gives you a little more flexibility so if you click install whichever you already done then enable it just like before we'll reload the other thing I should point out you can have this run have it prettify your code on demand so you you basically tell it to run you execute it or you can have it run every time you save so if we want to do on safe if you want it to run when you save they have instructions in here but basically there's just a single preference they a little check box you check editor dot format save or format on save so if you do command comma or you go up to your preferences in the menu I just like to search for it editor dot formats can't type here format unsaved right there if you uncheck it it won't automatically prettify your code when you save if you do check it it will and then if we do an example here here's something simple let's say that all this is screwed up indentation wise as soon as I save it returns to the previous state another thing you can configure it's up to you but if I have some random object let's say obj equals this nested object and I have a couple of objects in there so we'll say like person corresponds to this I don't know first name it's called something like this when I hit save it adds those spaces in there for me I believe you can configure that also another thing you can configure is to have the colons a line in a multi-line object so if I save it will format things so that those colons align that's a preference that you can check another thing just to wrap up if you have like a really long single line argue or a single line function call or conditional you can set a limit for that line length and it will split things up automatically so let's say I'm console about logging some really long function calls okay this is absurd but let's say it looks like this as I save oops I didn't save there we go it splits it up automatically onto separate lines and it takes care of indenting it and doing everything for you so there's a lot to like about prettify again I could really just unand end all of this and then save and it goes back so prettier now is the one I use there's preferences there's a lot to the documentation honestly if you read it here's a list of the Preferences that you can set up how you want to handle quotes if you want trailing commas to be there if they should be removed or added how brackets should be spaced there's a lot of these that have default values but you can change them and then of course you can set up a file with your own rules alright so that's a run-through of some of my favorite extensions by no means that all the extensions have ever used but those are the ones that I thought were worth talking about at least as far as front-end development is concerned so I didn't really touch on anything around Python so I'll probably do a separate video on that but those are the extensions I like I don't know what to say anymore subscribe please like this video and comment I guess if you have any other extensions that you like or that you think my students should know about or that I should know about comment and I'm interested to hear what you have to say alright thanks for watching

Channel: undefined

Views: 489,085

Rating: 4.9422264 out of 5

Keywords: vscode, extensions, code, webdev, js

Id: rH1RTwaAeGc

Length: 20min 3sec (1203 seconds)

Published: Tue Jan 08 2019