VSCode Extensions | Top 5 VSCode Extensions!

hello there my gorgeous friends on the internet finally we are gonna cover vs code extensions and as you can see by these comments to have too many of them so let's get going so everybody's asking me hey Edie what kind of team are you using so let's get into vs code right here and we're gonna take a look at something called material team so here it is a fresh install of vs code and what we can do is we can just go to the extension tab right here so we're gonna click on it and then we're just gonna search for material team and it should be the first one to pop up this is gonna take a while then hit install and then just wait that's been a long day alright so finally after its installed we can just close this sucker up and what we need to do is close everything escaping panic escape there we go and close it up here and as you can see it automatically added this new team for us so again now if you want to change this you can just by going here to the manage and then all you have to do is say color team and then you have these different ones you have dark now let me pull up some code actually so this is visible so I'm just gonna create an index on HTML I'm gonna hit exclamation tab and there we go boom so this is the one I use this is called the material team pelham telenet high contrast and the reason why you use this one and not the normal one is if I pull up the terminal or even this bar as you can see we have this nice dark contrast here but if we don't use that one then they kind of blend in together then you're gonna have this issue of like how do I drag this thing it's not working I don't see the edges of it so that's why I tend to go for the high contrast but there are several options here you can just pick and choose whichever you like well that's super cool ad but my icons don't look nice how do I make my icons pop and look very cool well we can use material I can team for that so let's head back to our extension tool here and we can search material team and as you can see here the fourth one is material icon team so let's install that one as well as you can see it's gonna generate us this very nice high contrast the colorful looking icons so there we go let's see if it works and just like that as you can see it generates us these icons alright number three you will be for the lazy people this one is called Auto renaming tags and let's take a look we can go to the extension here and we can search for Auto rename tag and it should be around here how to rename tag let's install this and what's basically allows us to do is let's say we want to write a h1 hello there my friend like so and maybe I want to change this to a paragraph so I don't want to go to the each individual section here like the first one and the last one so with this one we can just say be here and it's automatically gonna generate and change this to whatever you want and this will work for images work for pretty much all the tags in HTML for you alright number four is my favorite it's called live server and I think every text editor should have this and what it basically allows us to do is we can generate a server and whenever we save our files our HTML CSS JavaScript whatever you want it's gonna automatically reload it for us so we can see the live changes so let's take a look of how we can install that so we can just go again to the extension tool here and we can search for live server hit enter and there we go the first one with these Wi-Fi these purple Wi-Fi kind of things and we hit install and you're not gonna get free Wi-Fi so I apologize that's what you're expecting we should be able to see a live server pop up here after its installed and there we go it says loading and we can just hit go live and after we do that it's just gonna open up our HTML here hello friend I'm just gonna drag this here so we can see and what we can do is every time I just save something someone just gonna add the h1 I'm gonna write hello and what I hit control and save it's automatically gonna refresh everything for us and yeah just makes life super easy next one on the list is called Barry comments now if you write a lot of comments in your JavaScript and CSS you're gonna see just a big big gray area of code like it's not even code it's just comments okay but it's all gray and ugly and nobody likes that so let's add some life to it and we can do that with Barry comments so let's go to our extension tool here and search for better comments there we go first one install and let's go to our app that jas here and just illustrate you would normally leave a comment like this or you can leave a row of comments by writing backslash and then star and then star and backslash like so okay and here whatever you write it's not actually code it's just some text that you can add - I don't know - maybe you want to work on something so here what we can do is now that we have this installed if I do exclamation point I can just do and just write whatever I want I can say hey this code is not working so I can give a warning like so by using the exclamation point I can ask a question mark if I want to ask something like is this still working like so and we can also do a to-do maybe and this function is not finished and if you go into your settings you can also customize the colors of this if you just search for berry comments it's gonna appear in your settings here to search up on the search and you can customize the colors and you can add different symbols if you want more of them so that's better comments next one on the list is called CSS peak and I'm actually surprised I haven't really heard about this one so let's take a look we have it in here so if we search for CSS peak actually I had mine open here so who am i lying it's here CSS peak just install it has five hundred twenty-five thousand people install this and when we go here and let's just add a class to the speed tag so I'm gonna add a class of title okay Wow and we can also rename this to h1 look at that we're we're harmonizing all the extensions together so let's let's go back here we have the h1 with the class title and in here I just added a title class with a font size of 50 and color of light blue doesn't really matter but what it basically allows us to do is like when I hover over this nothing really happens but if I hold ctrl now and if I hover over it look at that we get actually a peak of our CSS on this specific class this also works with IBS and the cool thing is when I click on this it takes me right here I think it's a super cool tool where if you want to just take a look really quickly at different styles on your HTML and you don't really want to just hope I hope I hope but and jump around like that like crazy so just hold ctrl take a look click if you want to edit and you are in next one on the list is sass compiler if you don't know what sass is I have a card up here it's gonna take you to a tutorial but what it basically allows us to do is create sass files which we can do like crazy cool things in CSS and it's gonna take all the sass files and it's going to generate this one beautiful CSS and it's super simple so let's get into it let's open up the extension tool again and we can just search sass and I think it's the first one it's the second one it's the blue is the purple eye so there's a huge team I guess what like purple color is even the light server alright I'm not sure why so taken the next time you're making an extension make sure you use purple so let's install this really quickly and while that's installing we can just go back here we can delete this CSS file so let's delete this and then what we can do is we can just create a new sass so style dot s CSS hit enter there and let's let's take a look let's see if it's worth it if it works I'm just gonna add a background color on the body then say light blue and we can just nest things here so I can just add the h1 in here and change the font size to 35 pixels hit save and we can just click on this watch sass here so next your live live server and when we click on that it's gonna be boom generate everything for you it's gonna do magic we can close this panel and as you can see it generates us a beautiful-looking CSS which we can link to our website and enjoy life the next extension we're gonna take a look at is called prettier and unfortunately it only works on code so it doesn't work on on real physical humans but it's still pretty good so I highly recommend you checking it out okay so that way if you can we can just go here and go to the extension again and we can search for prettier there we go hit enter and it's the first one here and it's pretty much gonna help us format our code so let's hit install on this alright finally it's installed so we can go back to index.html now let me just tab this over like so and when I hit save well nothing happens Wow amazing best extension ever okay so how do we fix this so once we install it we also need to do one one one other thing we can go to the to the settings tool here and we can just go to the settings again hit settings and we can search up here for something called file on save and here it is the third one file on save and we can just enable this one close this one and when we hit save now everything is gonna magically go to its own place the beautiful thing about this it works in JavaScript as well so if we create a user and I'm gonna call it Edie hit save and as you can see everything is nice if I leave extra spaces it's gonna format everything and we can also customize the way we want like single quotes to be used or double quotes so as you can see right now if I just have a single quote and I use ads and I hit ctrl save it's automatically gonna change it so if you want to get in depth with this you can you can certainly and it can help you with es6 and all the other good stuff so you can customize it to your own liking so prettier is is super awesome you know what it's still pretty disappointing it doesn't make me look prettier so there we go hope you enjoyed this video make sure you drop a sub down below and yeah I kind of like this new format what do you think let me know and in the comments down below and until next time goodbye my friend [Music]

Channel: Dev Ed

Views: 330,319

Keywords: vscode extensions, top 5 vscode, top 5 vscode extensions, vs code extensions, vscode tutorial, vs code liveserver, vs code sass compiler, vs code prettier, visual studio code extensions, best visual studio code extensions, webdevsimplified, best vscode extensions, top 10 vscode extensions, top vscode extensions, visual studio code, vscode, visual studio code tutorial

Id: ULssP63AhPw

Length: 11min 18sec (678 seconds)

Published: Sat Mar 23 2019