15 VS Code Extensions For Front-End Developers in 2019

[Music] this video is sponsored by dev Mountain if you're interested in learning web development iOS or UX design dev Mountain is a 12-week design and development boot camp intended to get you a full-time position in the industry to learn more visit dev mountain comm or click the link in the description below hey guys so I'm often asked which vs code extensions I use and what do I recommend so I wanted to do a video giving you 15 different extensions that I use or I have used that have that's really helped my workflow in front-end web development so we're gonna go through each extension I don't just want to spout them off but I'm gonna show you each one show you how it works what it does some of the settings and so on alright so I have an empty folder here called sample app so if we need to create any files to kind of demonstrate stuff we'll go ahead and do that here now the first extension that I want to talk about is live server which is really popular I know a lot of you guys use this I use it in my videos all the time and this gives us a little dev server to run anything we want on any small HTML website you know so you don't have to install any third-party server or tool or anything you can run it right from vs code and one of the best things about it is it has auto reload or live reload so when you save a file whether it's HTML CSS JavaScript it'll auto reload the page for you all right so the way that this works is we need to create an HTML file I'm actually gonna create a folder called dist and inside here I'm gonna create index dot HTML and we'll go ahead and just generate some boilerplates and for the title will just say sample app and then we'll put an h1 here we'll say sample app alright so I'll save that and instead of going and opening up index.html on our filesystem we can simply right click and we can say open with live server and it will immediately open in a browser and you can see it opens on our loopback address on localhost so one two seven zero zero one and then port 5500 bye fault which you can change in the settings so you can change that you can change the paths and things like that but I usually just leave the defaults so to change something obviously we can we'll just put a one in here and we'll save and if we go back you'll see that it it reloads automatically so I don't have to keep hitting the refresh button which is great for tutorials and courses and stuff like that so that's live server next one I want to look at is the live SAS compiler and this is obviously used to compile SAS which is a CSS preprocessor and a lot of times you may have seen me use node SAS and that's because not everybody uses V s code however on my dev machine this is always what I use because it's it's built-in it's fast it works really well so I'll just show you how this works but before I do that there's some settings that I have that pertain to this extension so I'm just going to search for SAS and my settings and then live SAS compiler and then edit in settings dot Jason so these settings are what I want you to look at so we have this competant formats which is an array of objects and inside this object they have format to compressed what this will do is it will compress the compiled CSS files so it'll minify them so that you can save on file size you can also do expanded where if you don't want it to be compressed and then the extension name since it's minify they have it dot min dot CSS and then the save path I have dist slash CSS because usually when I'm creating something like you know a small application with vanilla JavaScript or you know a theme or something like that I'll have a dist folder with my HTML compiled CSS and JavaScript all right and then this right here I have generate map set to false because by default it will create a source map which I usually don't use or need so I set that to false all right so those are my settings now let's let's see how it works so outside of the disk folder I'm going to create s CSS folder and we'll create in here a main dot s CSS file which is a sass file and let's just do set a color to red and let's set the body - let's do background set it to that color alright so we have our sass if I save nothing's gonna happen because it's not currently running so down here you can see we have a button that says watch sass I'm gonna click that and our output will open here and you can see that it's now watching and if we look in the distal dur it now has a CSS file with a width folder called a CSS folder with a file called main min dot CSS and it has our compiled CSS and then we could just include that right in our HTML so we'll put a link to CSS / main dot min and if I save that and we go back to our browser you can see that it's it's auto reloaded from live server all right so it's a nice little workflow even if even though we're using sass live server we'll still update because this gets compiled immediately and it fires off that reload so if I go ahead and I change this color to let's say gray and save and go back you can see that it updates right away and by the way if you want to stop live server you can go down here where it says port 5500 and click that or you can right click and say stop live server or you can use the keyboard shortcuts all right so it's a nice little workflow especially for smaller projects static websites and stuff like that so that is live sass compiler the next one that I want to show you is HTML and CSS support and the main reason I use this is for class and ID attribute completion so if we go into our sass file or whether it's sass or regular CSS when we put a class like let's say large and we'll set the font size to say 4 R M and I go back to my HTML and then let's say for this h1 here I want to add a class and then I just type in L you'll see that that class will actually actually pop up that large class so this is really helpful if you're if you have a lot of classes and you want you want to drop down with them all now notice that I have these bootstrapped classes in here as well so the reason for that is because if I go to my let's go to my settings here what am I guess I can do with this I just want to go to my custom settings file and just show you that right here I have the CSS dot remote style sheets and I have the bootstrap CDN in there so it'll look at that file and it will pull the classes from that and put them in the drop-down and if you want to use something like Balma or materialise or some other framework you can just put that right in here and you'll get those classes in a drop-down all right so it's it's pretty just simple extension but I find it pretty helpful you know if you want to add a display class from bootstrap you can just get these dropdowns buttons and things like that alright so that's that next one I want to show you is the auto rename tag extension which is another very simple one but very helpful so let's say this h1 right here I want to change it to an h3 you'll notice if I go to the beginning tag and I go ahead and remove it the ending tag the one also gets removed and I can change it to age 3 to h2 so it'll just auto rename the ending tag along with the beginning tag which can be helpful and speed things up alright so really really simple next one that I want to show you is prettier which is pretty popular and this is a code formatter and it works for HTML CSS JavaScript pretty much anything and I have it set to save our format on save and in order to do that you need to change a setting all right so if I go to my settings here and I search for formats on save this will be unchecked by default so you want to check this if you want it to format on save and then there's all types of rules so if we go to if we search for prettier you'll see different rules like for instance I always use single quotes so I have or is it right here JSX single-quote so that'll always use single quotes within react or JSX and then right here prettier single quote I have that checked as well what this will do is if if any double quotes are in the file and you save they're gonna turn the single quotes I also have semicolons turned on so if I miss a semicolon it'll add it automatically if you don't use semicolons and you want to uncheck this all right I use a tab with of two what else we have some options for vitor two which is another extension for view J s which I'll talk about a little later if you want trailing commas you can do that so this is quite a few rules in here now yes lint is a pretty popular extension which I used to use but in all honesty it's it's it was overkill I didn't need it you can set all types of rules and really really customize your linting but I just I didn't need it and I stopped using it but it is a great extension and I know that a lot of people like it but just using prettier on its own is enough for me so let's create a javascript file to work with so within dist I'm gonna create a folder called J s and inside here let's create a file called main J s now if I do a variable called name and I set it to let's do double quotes and I set it to Brad and I leave off the semicolon and also let's just push it way over here and I save you'll see that at format's on its own goes back to its place double quotes turn to single and it adds the semicolon alright so don't have to worry about any of that stuff even in HTML if we have this way over here and I save it'll go right back to its place CSS same thing even if we're using sass go like that save puts it right back in its place so you can focus more on your code and your logic other than your indents and stuff like that alright and if I put like let's do function name and to like console.log and test if I save that it will go ahead and format that as well put that put everything where it's supposed to be so pretty helpful so the next one while we're talking about JavaScript the next one I want to look at is JavaScript es6 code snippets now you can create custom snippets I actually have a video showing you how to do that but this this gives you all the just basic JavaScript stuff all the latest things like arrow functions there's snippets for destructuring stuff like that console logging so if we go to our main Jas let's say I want to do a console log I can just do CLG enter and I can go ahead and put quotes and then I can start to type and it will replace that object text so we'll say hello all right if I want to do a console error I could do CER and we could just do error if I want to do let's say let's say a named function I can do n FN and it will give me an arrow function so from here it's gonna highlight then the function name so I'll call this ad if I hit tab it takes me right to the params so I can immediately just add in my parameters if I have any and then if I hit tab again it takes me into the function body so let's do a console log make sure that didn't work sometimes it doesn't work at first like you see how it works but sometimes it is a little finicky but let's go ahead and just console.log num1 plus num2 and then down here we can just call it and prettier will also add spaces so if I do like that and I save it automatically puts that space in here so we can also do things like for each loops so if I have an array of numbers and prettier if I save will put spaces in between there make it nice and neat and if I want to do a for each loop I can do fre enter and just replace this with array hit tab takes me to the parameter which will call num and then down here I'll just get rid of these and do a console log get rid of the semicolon though and then in here just console.log num alright so it can come in handy and it can really speed up your JavaScript coding the next one I want to show you is turbo console.log alright so this I haven't used this recently but I have used it in the past this gives you really fast console logging and is helpful for debugging so for instance if I want to console.log this variable I can just highlight it and I can just do a ctrl alt or control option on a Mac and then L and right below it'll give me a console log of the value the name of the variable and then a prefix now it's usually TCL by default but in my settings if I go to my settings and I search for turbo right here turbo console.log you can see I've logged output so we could put whatever here we can just say you can put like hope put in all caps and if I get rid of this and I do that again so I'll do control option L and now you'll see it does output and let's say I want to do a parameter of a function so if I highlight that and I do it it'll give me the value it'll also give me the name of the function so that we know what scope this is from ok if I want to do the array I can do that now what's nice is if you want to comment all of these logs out at the same time you can do that by doing alt shift or option shift on a Mac and then see and you can see I can comment everything out if I do that option shift you it'll uncomment so I can quickly comment and uncomment and then when I'm done with all this I'm done debugging or whatever I can do option shift D and it will delete all of them at the same time alright so it can be pretty helpful when you are looking for errors when you're trying to find out values of certain variables and stuff like that all right so that's turbo console.log so the next one is a really simple extension and is indent rainbow so this will just kind of you know make your as it says make your indents more readable it'll add a shade here or color of your choice so you can see right here where we're indented you can see this this dark space here if we go to the HTML all this space here this is coming from that extension and you can change the colors if you want so if we go down here you can see this option right here you can add colors if you want to change that to match your theme or whatever and it just it just clearly shows you where your indents are really helpful with like like python and ruby and languages that really depend on indentation so might be something you want to look into the next one is bracket pair colorizer which does just that it color eise's your brackets your your curly braces your parentheses and i'll just give you an example so if I didn't have that extension these would be white right here these curly braces but I'm gonna go inside here and do an if and notice that now these ones are purple and it just visually organizes your blocks so that you don't get confused of what goes where I mean especially for beginners how many times have you not known you know what curly brace goes with what so inside here if we wanted to do like a for loop now you'll see there blue and it's gonna alternate between these three colors if I do another block in here it's gonna start over with the yellow okay and you can easily change these colors within the settings if you want if you want them to match your theme or whatever alright so I've been using that for quite a long time so the next one is where as a code spell checker so this can be helpful because a lot of times we can run into errors because we misspelled a variable or something like that so let's say we want this to be add value if we mistakenly put an L in here you'll see it'll give us this little linting error and it says unknown word value and it works pretty well because for instance this ARR this isn't a real word but it doesn't give us that green underline because it's not a clearly misspelled word all right like if I have an additional D on ad well it doesn't doesn't even do it for that so it doesn't do it for everything it's just if it's a clear misspelling okay like that if I have 3 R's in error and I think it does that because you don't want these these false misspellings if they're not really misspelled because obviously in programming not everything is a true word that's in the dictionary but it can be helpful so I figured I'd mention that as well all right now the next one is a really cool extension that I recently started using and that's a rest client ok a lot of times even as a front-end developer you're working with back-end api's you're working with jason api's and a lot of times you need to test your endpoints you need to write your your front-end code to revolve around your back-end server we are back into API so this allows us to actually make HTTP requests right from vs code so it works sort of like like postman which is an HTTP client so let me just show you how this works what we would do is in our project will create a folder in the root called requests of course you could call it whatever you want and I'm going to create a file called API dot HTTP and from here we can make we can make HTTP requests so I'm going to use the JSON placeholder fake REST API is an example but of course you could use any API and we're gonna say get because we want to make a get request and immediately you see the send request button ok but we want to put a URL here so I'm going to do HTTP and we want to do Jason placeholder dot type B koat.com slash posts alright so just by doing this if I hit this send request it'll open up another tab here and gives me all the headers and it gives me the data that sent back which is all these posts alright so this isn't just a fantastic extension when you're when you're dealing with a back-end and you want to test your endpoints you want to see exactly what data you're getting back so you can incorporate that into your UI and if I want to make another request I can just go down here and I can put in triple number signs here and do let's make a post request this time to the same URL now since we're making a post request we want to send data so we're going to add in for the headers we're going to add in the content type we even get a drop-down of application Jason and then we can go ahead and put some curly braces in here and the data we want to send so let's send a title so we'll send a title of my post and let's do body and we'll just say this is my post and we'll go ahead and send this request we get our headers and then we get our response data which is the title and body we sent along with an ID that was sent from the backend so this is a really really cool extension I've used postman for a long time it's a great piece of software but recently I've been using this to kind of test my endpoints and stuff all right it's great for full stack development obviously as well alright so that is rest client the next one I'm gonna show you is get lens actually let's close that up and if we go right here so get lens supercharged or get capabilities into vs code and what this does is it does just that it gives you a lens into your git repository usually you just have this this hidden dot git file and you can't really see what's going on and this this does that it shows you your branches your contributors just shows you a whole bunch of stuff and it even prints it out within the code who updated what and when so to give you an example and also you get this icon over here where it shows you everything now I need to actually initialize repository so I'm going to go ahead and go into my terminal here and say get an it and you can also use your built-in vias code get but I don't really use that too much so I'm just going to do get emit in it and let's do get at all and get commit and we'll just say and this show commit all right so now if I go to I'm actually gonna close the javascript file and go back in and now on each line that I go on you'll see it'll show who updated it when and it'll show you the message the commit message okay so you know exactly who does what this is great for when you're working with a team that's where it really shines is so you know who did what now if I add something here like let's just add a person a name goes Brad and let's save that and see that it says uncommitted changes so it'll tell me actually what code has not been committed all right and if I want to make a commit I can open up the get lens now I don't think you can actually make commits from here but you can stage your changes so if I go let's see mange is actually I want to show you uncommitted changes so right here it'll actually show me what has been committed and what hasn't so this right here hasn't been committed yet so we can go ahead and stage our changes from here and then we could either commit from the terminal or you can use your built in get right here and just go ahead and hit the check commit message will say added name and now that's been committed and if I go to my main j/s you'll see that it says that we made a commit a few seconds ago and it has the comment of added name alright so pretty helpful if you are you know working on a team and if you want to take a look inside your repository you can see all your branches will be listed out here obviously we only have a master all your contributors will be here so it's it's pretty cool and it's definitely something that I've started to work with on larger projects I don't think it's necessary for little small projects but it's great for large ones especially if you have other developers alright so that is get lens the next one that I want to look at is a really simple one but pretty useful just like most of these and that is the whereas it auto markdown preview alright so this is great for a documentation when you have markdown files when you push to github your your readme markdown file is gonna is going to show in the repository homepage so if I go to my directory here my root and create a file called readme dot MD so we'll create a markdown file and right away you'll see on the side here a preview opens so let's say I wanted to add a title like my app and I have a crash course on markdown if you're interested in that let's go ahead and just say this is my doc for my app and maybe we'll have like usage and then triple back ticks and then we can put our code in here our command so NPM install so just it just shows you what its gonna look like which is nice so something I've been using for quite a while actually yeah let's we'll just save that so I'm actually structuring this as I would a real application or a real website so the next one that I want to show you is one that I use all the time when I use react and that is es7 oops I don't want to open this over here so it's es7 react Redux graph QL react native snippets I know that a mouthful but this is really really helpful when you're coding react because it just it allows you to generate full components whether they're class-based or functional or is it so if we go down here you can generate you know class-based components arrow functions regular functions and then it even has like console logs and stuff like that some of these are the same as the other extension I showed you like CLG cer so if you just want to if you just want snippets for console logs and you use your react you don't even need the other JavaScript snippets extension one thing I really like about this is prop types I hate typing out prop types and reacts so here we can just simply do PT and then whatever that type and if it's required we just add an R on to it in fact in my myrn stack course we'll be using this quite a bit the one that I'm updating now we can also do exports and imports and it's just it comes in handy with react so I'm not going to give an example for it just because I don't have a react application open but it's it's really helpful and then for view Jas I use this Vida vida I think that's how you say it but this gives you really nice syntax highlighting snippets intellisense linting it allows you to use Emmet within view templates I would not use Vijay s without using this in vs code alright but that's it those are the 15 extensions if you're an angular developer I would suggest the angular 7 snippets right here by John Papa so that's what I use for angular I figured I mentioned that since I mentioned reactant view but that's it guys hopefully you enjoyed this and hopefully you found some of these useful or we'll find some of these useful but that's it thanks for watching

Channel: Traversy Media

Views: 374,576

Keywords: vscode, visual studio code, vscode extensions, visual studio code extensions, vscode plugins

Id: LdF2RcelRg0

Length: 28min 19sec (1699 seconds)

Published: Fri Apr 12 2019