VS Code extensions that I can't live without!

i'm pretty much the opposite of a vs code power user but that doesn't mean that there aren't a few extensions which i absolutely love so let's go and find out what they are and just a really quick word before we dive into this and take a look at these extensions they are listed in the description below as well as their links so if you are interested in checking any of them out you can find them all down below so the first one that we're going to be looking at is bracket pair colorizer right here and bracket pair colorizer is a really nice extension just for making life easier to keep track of things um so even in css and this is css but if i were writing sas which i write a lot of you might end up with a media query that's actually nested inside of something like this um and in those cases um i know things are busted a little bit here because it doesn't understand that but you can see that this has the yellow brackets on it uh then inside the yellow brackets we get this section here which is the brackets that are color coded with the pink there and then we get the blue ones here so you can see where the opening closing is without sort of guessing when you have lots of nested stuff and this can be even doubly or triply useful if you have um some javascript that you're writing as you can see here you always get nested brackets and stuff like that so it can be really useful and this also works for so this is you know it doesn't matter what type of um bracket that you are using of course the browser needs to be happy with what you're writing so let's just come here and we'll try doing a calc here and see if it lets me nest it a little bit so if i say calc and then i miss that and then in there i might have a variable so then i have var and then i have another set of brackets and this would be like color or something and so you can see like right away visually looking at it i can find my pairs of brackets and again this works in javascript it also works with square brackets if you're using square brackets it's not doing it here because it's css and it's getting confused so it just helps you stay organized it makes it a lot easier to keep track of where you are just visually really really quickly instead of just you know that split second sometimes that it takes you to guess at things a little bit and of course it's also made a little bit easier if you're missing something here i can see i have a yellow one and then i have no closing yellow one and i get very confused but you can sort of it makes it really easy to spot like here you can see everything is changed i have an error and you may go why do i have an error there and then it might make it a little bit easier to spot and things like that along the way the next one that we have is my live server so if you watch any of my videos you know that i usually mention live server i don't think it's necessarily you know a lot of the time for actual projects i'll be using something like browser sync but if i'm doing something quick something easy or a youtube video but whatever it is where i don't really want to have to do an npm install and get browser sync working and other things like that live server is so nice for quick and easy projects and the way browser sync works is you just once you get it involved it gives you a little go live down here at the bottom and then you click on the go live and just like magic it opens it up live in the browser you can make changes to your video here so let's just say i delete let's actually shrink this down for a second so let's just say all right we can come up to here and change a color because that'd be the easiest thing to see instead of just deleting everything and those colors change as soon as you hit save so a nice easy way to update everything i really can't live without this one it makes my life so much easier and i like not having to have all the node modules and dependencies and stuff like that for simple small projects you're doing a personal project that doesn't need very much and you don't need that extra functionality of other mpm packages maybe you know it just makes it just runs it works it's pretty awesome so i really really do like having live server one thing with live server that is very important though is that you file open folder and you open your root folder you don't open just your index file if you open an individual html file it's not gonna work you have to open your folder for it to work and every now and then for some reason when the extensions load it doesn't load if that ever happens i just close my vs code open it again and when the extensions do load it's there next up we have the svg previewer which if you use a lot of svgs i would really recommend just because it makes it a little bit easier uh to be able to see stuff and these days i find myself using more and more svgs even though i don't i'm not the best in the world with them so here in my image folder i do have the firefox logo as an svg you click here you see this and you don't know what you're really looking at but when you have this it adds this nice little guy up here open preview to the side and just like that you get the preview of what your svg is right in vs code so this i find really useful if you have a whole bunch of stuff you can just look through them really quickly and see the previews and you can even zoom in and out and stuff which is kind of cool and change the background if you find you know you need to so it's a nice little feature it just makes life a little bit easier and isn't that what extension's all about everything we're looking at here is all little simple things but they make your life a lot easier and just improve your workflow along the way uh so i find that really really cool and whoops we didn't want to do that but really really cool i find and super super useful so let's close those down and head on to the next one and this one i think a lot of people will be familiar with but it is prettier and if you don't know about prettier it pretty your code automatically pretty much and the nice thing with prettier is it works in pretty much every language that you're going to be writing um so let's just say i made a mess of things here and when i was writing it and i don't want to do that but what i want to do is tap this over and you know you're copying and pasting stuff around your your html is really disorganized hit save boom it's formatted properly you have some nice nesting on there you come to your css and you know i don't know what you're doing you're copying and pasting some stuff and things were a big mess and then even here we could do some something like this you hit save like magic it looks nice and pretty again and the nice thing with this is you can set defaults for prettier for all your projects and then you can also have project specific code so you can make a prettier file that overwrites some certain things that and the good thing with that is if you're working in a team you're all sharing your prettier file and that way everybody's code is formatted the same if you're writing javascript and you're working with somebody who doesn't like using semicolons you can have it add those semicolons every time they save automatically if you some people are writing with single quotation marks some people are using double quotation marks it will switch them for example let's just see if we do a background image url and on there i say x y z whatever it doesn't matter it added that let's do that again i'll put a single quotation mark and abc and so it's single i hit save and it's updating it automatically to be double quotation marks and you can configure that how you want if you want it to be single quotation marks you can have it switch everything to that as well so it helps just lead to consistency it helps clean up your code you don't have to worry about tabbing stuff and on tabbing stuff and all of that it just you hit save and it fixes it for you super wonderful and super customizable which is always really nice now this next one is one that i only got recently uh very recently which is tag the auto rename tag so auto rename tag it does what it says it's going to do where i don't know how i lived without this to be honest for so long um so if i decide that i don't want let's go for my header at the top i decide i don't want this to be my header anymore i can right section here and like magic it switched this one down here also or i can come on my h1 and this h1 should actually become an h2 look at that the closing tag switched as well and i lived without this for so long and it actually led to me making errors in my code that i've had trouble finding just because i'd forget to change the closing tag somewhere or i didn't realize i didn't change it you know this section gets changed to a div or more likely you have a div that then becomes a section or becomes a header it's just so so so nice that it can close there it can change the closing tag as well if you write any amount of html this really is a lifesaver um so yeah i would definitely recommend checking that one out and last but not least this one is less of an extension even though it's their color themes are listed as them but people always ask me what color theme i use so i use atom1 dark um and yeah but that's it that's the color theme that i use so i think it looks nice i know there is one other one that has a very similar name let's see if we can find it on the fly here um adam is it one dark pro yeah i've heard one dark pro so i've heard that it's very very similar but it's a little bit different um so you can check out one or the other but they're gonna it's gonna look very similar to mine either way uh along the way and that is the theme that i use so that should answer that question hopefully for a lot of people since everybody is always asking me that and that's it for me as i said i'm the opposite of a power user but that said i'd love to know what i'm missing out on so please leave a comment down below and let me know what extensions i absolutely need to get or need to try if i'm still using a few of the suggested extensions a few months from now and i'm really enjoying them i'll make a new video that explores those community recommended ones and with that a big old thank you for watching please do consider subscribing if you aren't already subscribed a massive thank you to my patrons for their support each and every month and of course until next time don't forget to make your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 46,549

Keywords: Kevin Powell, tutorial, html, css, vs code, vs code extensions, best vs code extensions, good vs code extensions, essential vs code extensions

Id: plEwInSiqgw

Length: 9min 0sec (540 seconds)

Published: Wed Dec 23 2020