10 Helpful VS Code Extensions for HTML & CSS

what's going on everybody this is mike of munch development coming to you with another coding tech original without further ado let's get started so today we're going to be discussing 10 helpful vs code extensions for html and css all right so let's get right to it the most popular one right you need to see your html you want a hot reload what's the best one to go with the only one right the top dog it's live server all right so i'm to enable it right i've had it for years now but i'm going to enable it what you're going to see happen down here is i'm going to get this button here at the bottom i click it to go live and i get a fresh well let's just move this over here there we go now it's it it reloaded at the bottom but i want it to be right here so i'm just going to refresh that it went down to the monitor below but we're just going to work with this one all right so we've got our live server it does hot reloading i'm going to hit up uh alt shift down arrow and yeah all right so we got a bunch of these now i hit save and it automatically hot reloaded okay so let's go back here i'm gonna get rid of this line um ten points for anybody that can tell me uh where this text comes from all right so to number two okay so we're back uh we're gonna do auto rename tag all right we're gonna install auto rename tag okay so i've installed it already but you can just go here if you're searching for extensions you just come up here you search for it and you click install but i have most of these installed already so i'm just gonna enable them all right so i'm enabling you know what yeah so auto rename tag let me disable it first sorry i'm supposed to show you what life was like before all right so if i wanted to rename this tag here let me scroll all the way down and say well i want this to be an h1 i'd have to go here find the first one and then find the second one and then i'm going to reload that again so we can oh sorry i need to do that i wanted to do live server there you go go live all right so let's just refresh that and now we've got we all are tall is here as an h1 now if i wanted to do that for all of these you know the first one then the last one the opening tag closing tag that would get a little cumbersome all right in comes auto rename tag let's enable it all right so let's say i wanted to uh rename this tag now oh you see it's what's happening it's doing part of the work for me right let's see i want to make this an h3 all right yeah oh wait n3 that's not good h3 there you go browser's like i don't know what to do with that all right so we got auto rename tag all right the next one it's really important it's not just for html and css it's for pretty much any language that you're writing and you're using vs visual studio code or any uh text editor you need prettier okay let's just get that out of the way right now you can see how my my code is all over the place even in my css file it's sort of all over the place and that's on purpose but you can uh prior to prettier and eslint and all these other things you'd have to deal with you'd have to deal with all sorts of people's all preferences when it came to how people formatted their code well not with prettier all right so let's enable prettier and see what happens so if i click save nothing's going to happen all right so nothing's happening so what that what do i need to do about that i need to go into my settings i'm going to hit command then and i'm going to format on save all right and i'm going to say yes i want the editor to format on save okay now i can come here and click save and look what happens it formats my css and it'll do the same thing for my html prettier for the win all right so the next one that we're going to use is intellisense for css class names in html that's this one right here okay so basically it allows for intellisense all right uh for your uh local and for uh external uh uh style sheets okay so let's enable it all right so let's see well at first let's do this all right so i'm going to go over here go to main.css let's say i wanted to make this i want to take this class and i'm going to use this so we all are small and i wanted to say and i do that and i say okay well let's just see nothing's happening so i just have to paste this in i don't know if it works hey but it does right so you see what happens over here on live server it updates all right but wouldn't it be nice to know what's in my main.css well that's where intellisense where css classes comes in let's enable it and now when i type a class and then i hit control space oh wait it's not it's not there it is all right hit control space i can pick from the um the classes that are in any uh imported style sheet all right so if i said small let's say i hit that uh it's not actually not working for control space i think that um i think that's for ex i'm gonna show you in a second i think that's for external style sheets that you bring in so let's say i'm bringing large okay so large right we've got it going okay so what if i wanted to use a bootstrap all right i'm going to bring this link in over here how can i make how can i make that work for a uh a library that i pull in cdn uh from bootstrap right so i can command shift p all right and then i'll say cache css class definitions so if i were to was were to do that now uh and i would say class command space nothing would really show up right but what i want to do is i come back over here command shift p and i say cache css class definitions so it's going to cache those definitions from bootstrap and now when i hit command space let's see come on there we go we've got all of this stuff to win so if you know text uh what is it alert or something like that alert danger right that should change that up there right the alert is now danger right so my bootstrap is working i can use my bootstrap classes now um just by hitting um command space and it'll intelli intellisense will say like okay what is this uh let's see is it yeah it's not even needing command space i think command space was something that we're using in the past but it doesn't use it anymore so we're going to go ahead and say never mind i don't need it right but look at this button outline success i don't know what that's going to do it's probably not going to just you're going to change it to green okay cool all right so we got our whatever language you whatever css framework you like you can just import it and you can have access to those style sheets all right so let's keep moving right along all right so that was number four number five is css peak all right css peak allows you to uh if you're clicking here uh you wanted to uh option click but i'll show you like right now i don't know what these classes actually do like my large class what does it do i don't know but we can install uh csspeak and let's enable it all right and then we come back over here and we can click all right we click that well let's go back here sorry i got my emacs stuff on all right and let's do uh peak right and we say peak definition right and it's like oh okay cool i know what that large text is now right okay uh what the large class is i can do i can figure that out right so and then your um your peak definition is uh looks like that's uh option f12 all right let's check to see what that see if that works option f12 and i think i have to yeah option f12 and it works okay cool all right and i think you can also option click you can yeah you can command you can command click it as well and it goes straight to it okay cool all right so let's open our main backup okay cool we got that back over there all right this document is not the prettiest thing going on but we're working on it all right so we've got cssp now one thing that i really like as i'm uh as i'm using more grid layouts uh is i i've come to like let's see this i'm going to bring this over here and come back in here and we'll do uh css grid snippets okay so let's where is it where is that bad boy there it is css grid snippets right so you can actually uh use these uh snippets here and it allows you to do kind of quick uh css grid stuff right um so i'm going to let's see pull it in and i'm gonna i'm new to this one though right this is not something that i've been using very often so i want to be using some of these and let's say okay well let's let's make uh let's look at these while looking at uh yeah so this one's a new one to to your boy here all right so if i wanted to add here let's see let's see some of the um some of the possibilities so let's say dg right display grid all right so if i have all right let's see uh grid and i want to say i want to say dg display grid uh let's see uh gtr grid template rows okay cool repeat i need uh seven rows at one fr okay and let's go back over to my html and see what i can do i can say uh dot grid emit uh you gotta use my image right and then come back over here and see what happens all right to my html over here all right let's see all right did i do display grid yeah display grid grid template rules repeat one fr okay well that did not work oh you know what i'm thinking the wrong thing columns there we go all right boom see there we go that's what i was expecting to see all right let me scroll down over here all right so you have five columns across there we go one two three four five and then it hops back down and makes it look okay cool so this is a pretty cool one i like it i've been using it kind of sparingly but i'm going to use it more and more often i just want to drop that one in here though because i think it's a pretty cool one especially if you're going to be using more modern css grid type stuff all right so to the next one all right let's see where what we got uh csx flexbox number seven css flexbox cheat sheet okay uh this is very helpful for me i like this one where is it uh yeah yeah cs oh yeah i have an install i need to reinstall this one right i was looking it up and i like what it does right so for those of us who do not remember everything at all times let me close this out you can look at this one you can say okay look here's a cheat sheet we can do command shift p right and search for open css flex box all right so we can do that okay command k on this i like that command k all right so let's do uh command kk all right and you can see the css flexbox cheat sheet and it kind of gives you a visual view a visual of what like what each flex uh property does right and some of the you know the properties and then all of the um the the uh descriptors and the properties so you can see like row row reverse what does it do right you can kind of play around with this and see what will happen you know direction left to right and things like that so this is it's not something that actually you use in your code it's not helping you to code faster but it is something that when you get confused you're like why is my code not working the way i want it to work well especially if it's flexbox you can come over here and look at this flex cheat sheet and it will help you to kind of get an idea of where you might have gone wrong all right so uh number eight all right number eight number eight is lorem ipsum right it's very i i mean it's not the greatest but it's very helpful when you need to create uh let's do this do a p and we do lorem 5 3000 all right and then i click save and i come back over here right and i've got my 3 000 words of text and i can see what it looks like right lorem i've been using for years it is very helpful so i don't have to you know make a bunch of garbage text and just like you know asdf asdf asdf right like eventually that that gets a little boring okay so um let's go let's number what we got number let's see number nine yes number nine all right this one is more of a visual help but it's vs code icons or material icon theme so it's a two for one all right you can pick the one that you like the best okay so i i i go back and forth what's going on oh that's because i have that in there all right so i go back and forth between which one i like of the two of these so vs code icon so let's look at the icons here right these are your default icons right you come over here you say you know what i want to enable uh vs code icons because i like those better right let's see what happens so i'm going to reload and see what happens well it didn't change much okay let's see what happens all right maybe maybe maybe let me try uh material icon themes all right enable all right let's go over here there that changed all right so you see the material icon themes changed i don't know why vs code icons did not change probably because that's the default probably icons for visual studio let's see maybe they look exactly the same look let's check let's check it out let's see well you know it didn't work so we'll uh we'll disable that one all right so go with the material i contain no i'm joking you could pick which one but it allows you to see all of these types right so um either material icon theme or visual studio code icons all right it gives you a visual cue as to what type of file you're dealing with um i know i i it's become so second nature for me that i i rely on this right you can go minimalist you can you can get rid of all of those in your settings uh let's see uh let's see we're just going to do that icons icons yeah preferences icon themes like you can pick which one you want right uh you can go none material minimal seti visual and vs code icons there you go all right so that's how you pick between preferences icon themes right always go to your preferences all right material yeah you can pick one right uh you can minimal right that's like that's just that's where the weird uh i mean hey minimal if you like minimalist right you know um yeah that's the basics right there and then uh i twitch again i switch between these two some sometimes i like one sometimes like the other i'll just switch it up every now and then all right so that was number nine all right number 10 is and i'm gonna make this one quick okay this is for virtually anyone that's using git okay so if you have a project and you need to make sure that oh you need to know who made changes that you know possibly broke something or someone had a really great idea and you're like hey i like this idea who who did it all right so i'm going to do a git init all right so i initialized an empty repository and i'm going to install git lens right so i'm going to enable this and what happens is i'm eventually going to get so i'm going to do this i'm going to do git uh commit minus m uh initial commit all right untracked file sorry git add dot i'm going to add everything and then i'm going to do initial commit all right and then i'm going to make a change okay so i'm like hey so but actually it's showing me already right here saying you made these checks uh changes seconds ago and the uh commit uh message was initial commit right so i can go to this uh and look at the initial commit three files added you know i can take a look at that but it's initially is letting me see who made the changes and who i need to yell at right so i need to yell at myself okay so i think that's it that's all 10 right um let me know down in the comments below uh html css um extensions that you use that you find helpful uh let me know if you uh enjoyed this video uh don't forget to uh like comment subscribe to the channel uh you'll see the uh the code uh in the description i'm not sure if you want to see this little code but uh if you if you know where this text is from uh yeah right if you remember if you know what book this text is from uh you'll get 10 points i don't know what my point system is my point system is useless but it'd be a fun exercise to try to figure out where this is from uh and what would you all like to see next so comment below uh in the video uh thanks for all the comments that you've been uh leaving uh it's really helping me to improve my pedagogical still skill right i'm learning and growing as a teacher and i also you know i want to make sure that i'm giving you content that's helpful for you all right we can't help everybody but we want to help as many as we can so i will see you all on the next one and happy coding

Channel: Coding Tech

Views: 166,578

Keywords: vs code, visual studio code, html, vs extensions, css

Id: AxfjMZbLifQ

Length: 16min 43sec (1003 seconds)

Published: Mon Dec 14 2020