Top 10 VS Code Extensions for Web Development (2020)

visual studio code is great but if you're a web developer and you don't have these 10 extensions installed you're doing it wrong all right we're going to talk about my top 10 web development related extensions for vs code in 2020 so before we break all that down if you're interested i've got a free vs code cheat sheet that you can download for free i've got a link below so go and check that out otherwise i think we're ready to get started here so extension number one here is the auto rename tag extension now this one is pretty simple maybe the simplest one or one of the simplest ones that is in this list but it's also really valuable and what it allows you to do it's probably easier to show you than to talk about it is if i change this div to an h1 for example it automatically updates the bottom tag so if i undo this and then if i come down to the bottom tag so it works both ways and i update it there it's going to update it in the opening tag as well now that's not too big of a deal on something like this like the opening tag closing tag are fairly close together but what if you had like this main up here and you changed it there and then you had to scroll all the way down to this main to change it again well with this extension the auto rename tag you don't have to worry about that you just have to change it in one place and that will take care of the rest of it now if you're curious what this source code is this is from an app for a project a mini course that i did on the off xero youtube channel this is about building an authenticated to-do app with next.js airtable uh tailwind css and office hero so if you're interested you can go check that out that's where this code is from other than that let's get on to extension number two all right so next up is the bracket pair colorizer and i would say this one also is fairly simple but again really nifty for working with uh with javascript so what it does is it colorizes your bracket pairs if you maybe didn't put that together so what i mean is if we look inside of here and look at maybe a function so if we look at this this react component here we start off with this bracket here which is yellow and then notice none of the brackets in here are yellow that's because it's waiting for this bracket down here to match so there is the yellow matching bracket and then inside of that you get these matching purple ones right and then those are closed and then you get uh this blue one which matches this blue one and so on and so on and then even your parentheses so your parentheses and your brackets so maybe this should be parenthesis bracket pair colorizer but it will do both of those to show which parentheses or which bracket matches with another one and this is so useful especially if you get into a bunch of javascript and and it's kind of hard to tell what's what and what goes where that's a great indicator using this bracket pair colorizer now i do want to show you or highlight one tiny feature inside of vs code as well is they have these hopefully you can see it because they're really thin but they have these little thin lines here that show basically the indentation for your code so you can see this use effect it's just a function if you're not familiar with javascript but you can tell by this line over here the faint one that that basically ends on this line and you can see my return statement up here will go all the way down see that how long that line is it spans all the way down to here so vs code will add some context into how your code is laid out as well but make sure that you have the bracket pair colorizer to give you those colors on your brackets also all right and then next up this is actually a twofer i guess is either the es6 code snippets javascript es6 code snippets or the es7 react redux graphql react native snippets and let's start with just the vanilla javascript one so these are just snippets es6 snippets modern javascript snippets that you can leverage inside of your code and a good example of this is an imp command so imp is short for import make sure and go to grab one or make sure to go and grab the right one here and i run this and it's saying all right where are you importing stuff from in this case react and then i tab over and i might want to get something like use effect now this is already up here so i don't need it but that's what that extension would be used for and they have code snippets for uh for imports and exports and functions and classes and all kinds of stuff so these are really really useful now if you are a react developer this is the extension you should have the es7 react redux graphio react native snippets i wonder how fast i can say that this one is really nice because not only does it have es7 javascript snippets in it it also has stuff specific to react redux graphio react native so this is almost like an all-encompassing snippets library here if you use one of those technologies so this is kind of a twofer i would start with your javascript ones that we looked at first if you are a react developer then you might want to look into the es7 reactor redux graphio react native snippets extension as well that was actually pretty fast i feel like all right the next one this is one of my all-time favorites in vs code is the live server extension and what this does is it allows you to basically right click on a static html file so just a regular vanilla html file right click and you can open it with live server which means it's going to run at a local server you don't have to start up express or anything or node express or anything like that it will do it all for you so actually i've got an instance of vs code open and i've got this app which is a vanilla html css and javascript app for lightening and darkening a color so if i right click on here and i jump down to open with live server with this extension installed it will open up this application i think did i hack this earlier no this is sorry that was before this was from testing something else i don't think i got hacked so this opens up the application you can see i can put in my brand color for example that red and then i can lighten it by a certain amount or with this toggle now i can darken it by a certain amount so that works and it's running at this port 5500 and it's a live reloading server and what that means is if i come in to and get rid of this cross-site scripting test that i did and i add in a piece of text here this is going to now live reload and show me that text and it works perfectly it's so nice for working with vanilla html css and javascript it just works it's super simple it's live reloading so you can always see your changes as they're made almost in real time all right next up if you are a developer you uh a lot of you are probably already sharing code snippets or pictures of code snippets and polar code is the way to go if you're not already using it so what this allows you to do is let's say i want to grab a little snippet here this piece of code let's grab it all the way over to the left side and then open up the command palette with command shift p and then open the polar code app and the one thing i would recommend or the way this works let me show you this first is you just paste in the code so there it is and then i would recommend making this full screen so now i get this really nice looking screenshot here or this image and it's just a simple button to export this thing you can tell it where to save i think i've done this before i will override that one and now i've got this image on my desktop that i can share on twitter or instagram or anything like that and it's got a nice style it's got a nice format to it and it's just really nice it's really easy to do and it's a great way to share your code with other people who might be interested all right next one up is the prettier extension and let me just start by saying if you as a developer are worried about formatting your code yourself you're probably doing it wrong that is that's what tools are for you don't have to worry about that stuff let the tooling take care of it and one of those tools is prettier so what this will do is if i start adding in a bunch of unnecessary spaces and tabs and i move this down to a new line and i move this down here and this down here and this down here and then i get rid of a semicolon that sort of stuff this is obviously terribly formatted you wouldn't be able to read this because of the way it is but what i've got set up is prettier to run on save so when i say this it's going to format everything and sometimes it's not 100 perfect as what you'd expect but it's so worth it overall to not ever have to worry about specifically formatting your code and letting printer take care of it so the one thing you'll want to do when you have that installed is check the format on save or at least this is my preference check the format on save which means it will go ahead and format every time you save your code just like you saw in mine don't worry about formatting yourself let the tools take care of it trust me you'll thank me all right next up is the advanced new file extension now this is a little less specific to web development but it's very specific to me and it's something i'm really passionate about and i want to show you there's no great way for me to do this let me grab my keyboard shortcuts and search for advanced new file and i'm going to reset this key binding so now that thing is going away so what happens is if i do command n or control n so command it on mac control n on windows what vs code does by default is it creates a new file but it doesn't have a name it doesn't save it anywhere in here i would have to command s to then save this file and then choose where to go i hate that experience that experience drives me crazy so if i come back and update this keybinding it should be command n here and can i do i'm going to update this when this is just for me this should be when a terminal is not focused all right so if i do a command in now what this extension will do is it will prompt me to say hey which directory do you want to put this in and i can scroll through a list or take my last selection or the current file or the root those are so handy so let's just start with the root and i'll do a test.txt i've already got the test.js there and this will generate that file it will save it down here and now i can go and not have to worry about using my my mouse everything's through shortcuts and stuff i really love this extension i use it every single day i highly recommend this one again not super specific to web development but just like taking advantage of vs code itself all right next up is the get lens extension i've got a couple of videos on working with git inside of vs code and git lens is by far the most powerful extension that you can get pun intended i guess for working with source control for working with git and for working with github so if we take a look inside of here and i put my cursor on one of these lines notice i get this kind of faint message over here it says u comma two months ago and initial commit that is saying who wrote this code uh how long ago was it checked in and then what was the commit message so blame information if you're familiar with that i get the same information down on this toolbar so that will these will all look the same but it basically adapts based on what line of code you're on and then if you saw if i hover on this now i get a lot more information or at least i have the ability to go and click on that commit if i do that now i get a ton of different commands i can show the commit and the search commits history i can open files open commit on github uh let me show you what this search looks like this will open it down here this will show all of the files that were inside of that commit you could click on them all these were new so now i can see that these files were added and so on and so on uh line history file history looking at branches and comparing commits across branches and all sorts of stuff if you're uh if you're working with git and github or bitbucket or whatever which you should be you absolutely should be then you should have this extension installed and take advantage of how powerful it is in supercharging your git workflow all right next up is the live share extension and this is a little less specific again to web development but super super useful for developers in general and what this allows me to do is i can share a real-time collaborative development environment for other people to work in so what that means is if i open a project on my machine i can i'll log in to liveshare with either a github or an outlook account when i do that i can go i can turn on live share i get a unique link that i can send you or someone or a group of people and they can then join that session so what they will see is the same code that i am working on they'll also be able to see my cursor as i move around so if i wanted to uh kind of teach say hey like line by line this is what this does this is what this says instead of sharing my screen on zoom or something now inside of live share i could just give them access to the code directly and we could walk through stuff line by line you can also show or share your like local host so they could run it on their machine as well you can share your terminal if you want to this is like really mind-blowingly powerful and it's great for code reviews it's great for teaching it's great for learning so you have any of those scenarios that you think make sense definitely check out vs code liveshare all right uh now we have the quoca extension and this is for me the easiest way to test out a very simple piece of javascript this is a javascript scratch pad i think a lot of times what you might do is you might come into your console inside of not sources but inside of console and you might say something like all right what does new date actually return okay that's what it gives me uh that's not a very great experience for writing code what would be a lot easier is if you could do this right inside of vs code and you can so if i come down to the quoka extensions a new javascript file now i can log out the same thing so new date and then my parentheses it shows me a line what the output is and then it also shows me those logs down here so anytime you just want to test out a new piece of javascript make sure to check out the quoca extension and run it in that live scratch pad just like i did all right i've got two bonus extensions here for you just because i enjoy extensions in vs code so one is the cobalt 2 theme official by west boss this is the theme that i use this is what lots of people ask me about what theme are you using what font which is cascadia code by the way but this is an amazing uh amazing theme i love it you should check it out uh the cobalt 2 theme official by west boss and the next thing is you may have seen me talk about this in a previous video the setting sync extension which used to be a required extension now it's actually kind of built in to vs code so you can see in here all the things that have been synced sunk sync synced probably from my settings my snippets my extensions uh my shortcuts all those sort of stuff sort of things are synced inside of here uh thanks to vs code so this is kind of a uh a pseudo extra extension where it used to be an extension now it's just built in but i figured it was worth mentioning anyway so uh question of the day what are your favorite extensions inside of vs code let me know in the comments below thanks as always for checking out the videos and i'll see you in the next one

Channel: James Q Quick

Views: 101,729

Rating: 4.9514732 out of 5

Keywords: vs code extensions, visual studio code extensions, extensions vs code, vs code, visual studio code, vs code web development, web development, top extensions 2020, vscode tutorial, top 10 vscode extensions, top visual studio code extensions, web dev, vscode extension, vscode extensions 2020, web development tutorial, best vscode extensions for web developers, live server extensions, live share extension, prettier vs code, quokka, git lens, vs code themes

Id: _aWDQVxZP6A

Length: 14min 57sec (897 seconds)

Published: Tue Oct 20 2020