VS Code Extensions you absolutely need in 2021

all right so vs code extensions these are ones that you absolutely need i'm going to start off with a brand new instance of vs code and we're going to have a look at some of the best extensions and why you should be using them if you haven't already hit like and subscribe and let's just jump straight into it all right the first thing we're going to do is open up vs code and head over to extensions to have a look at some of our options the very first thing we're going to do is head over to the search up here and grab ourselves a really good theme for vs code one of my favorite themes is actually the atom theme but what's more is i like the dark version of that so if we have a look over here we do get this version called one dark pro which is probably my favorite version and with this version you get a lot of cool stuff if you have a look down here you get things like a lot of good coloring for classes and functionality in javascript as well as variables and everything is very distinct this makes coding much easier and to install this we simply simply click install and immediately it's available to us and this is already looking way better i haven't just installed this in vs code i've actually set this up in my entire room dark theme just makes my life easier but there's a lot of benefits using it having really strong harsh white light on your eyes isn't the best thing especially when we're staring at our screens all day this is why i prefer this dark theme because it's actually good for your eyes i've done a whole video on ice string but i would recommend you guys use that especially if you're programming at night time too the next one i wanted to show you guys is this one here attack close or i think it is called auto close tag this is also a great extension it's really simple so let's quickly install it and have a look at it it's essentially going to close any tag that you create so if you're writing out code for example html it's going to create this closing tag here for html the same with body this might seem pretty simple but when you're coding you'll actually find that this is one of the most useful things that you can do over a period of days weeks and even years this one small extension has saved me hours in extra code that i didn't have to write it also has saved me include clean code this essentially means that if for example i'm writing out lots and lots of divs we all know what happens when we forget one simple div and the whole page breaks this makes sure that all those divs exist exactly as i need them to i don't forget to add one in and on top of that this works in html and works in react and works in pretty much any language it just closes a tag for you it's so much easier and i definitely recommend using it and there's one more extension that works hand in hand with this and this is auto rename tag as the name suggests it pretty much does what you would expect it to for example if you do have a tag here and you need to change what type of tag it is at the front of the tag the back end also changes as well this also means that if you have lots of divs and you're not too sure which one is the closing tag you don't have to worry about that this extension does it for you it also means that if you need to change the closing tag the opening tag changes as well this just fixes up little errors and bugs you might have when you accidentally change the wrong thing so that you don't have to worry about all of that and it just makes life a lot easier there's one library that i use every single day and that's react whenever you're using a library or a language it's good to have a look to see if there are any extensions for it in this case there's some extensions for react as you can imagine and the two that i usually install are this one here which is for react native tools because i do do quite a little bit in react native and this one here which has code snippets this code snippet extension is for react redux and a lot more but it makes life easier because when you need to create say a react component whether it's functional or functionless or a class component you've got all your little autocompletes here and you can simply type one out and it autocompletes a full function for you in the code the next thing that i would definitely recommend everyone in seoul is this one here which is spell check this is an extension which double checks your spelling and while this seems pretty standard it actually is quite useful because it doesn't just check whether you're typing out regular text properly it even checks whether your variable names are typed correctly because we all know what it feels like when you've typed something incorrectly and suddenly we have bugs happening here or there or somewhere and we don't know where because we start googling we start searching and in the end we find maybe just our syntax is wrong this is why this code spell checker has saved me hours and hours whenever i make some changes and i see that maybe i wrote in the actual syntax incorrectly it helps me identify that way faster it also helps me spill because my spelling isn't the best if you are looking for good extensions another thing you can do is actually go over here and filter them and when you filter them you can filter them by the most popular extensions and get an idea of what's good and what's not here we already have our top extensions so we've got this one here for python for example this one here for c plus plus and z and this one here for eslint i'm actually going to install this one for eslint because this will help me make sure that my code is good and if i've got some problems where i might not be running something properly it'll give me some notations on how i can improve that and the other one i'm going to install here is prettier which is a code for matter and this one has been quite useful to me because when i'm writing out code i might not always write it the best way i might forget to add a tab or i might even forget to add break lines i just sort of write all my code and then figure out maybe i can edit it later to look good using prettier essentially beautifies my code so that when it's time to present it or push it out through git then it looks like a professional did it and definitely not me another plugin i find myself using quite a bit is this one here for live server this is pretty simple it simply opens up a browser window of your current working directory and opens it up on that port so that you can start editing it and seeing those changes on the browser this is pretty simple but useful and something that i would recommend you guys do instead of maybe installing a full web server or manually refreshing the page now we were customizing vs code's design a little bit earlier with the dark theme but one thing i forgot to mention is this one over here this is the vs code icons and if you're using vs code this is simple it actually just adds some really nice icons next to your folders so that you know what they are i'm going to select to use them over here because they're great and this just makes life easier if there's a react file it gives you a nice react logo next to it if there's a folder you have a folder icon and while some people might not like this for me personally i find it actually helps me identify what i'm looking for in terms of files much faster if we keep scrolling down we'll find this other one which is just as awesome in terms of visually customizing vs code it's called the bracket pair colorizer and if we scroll down here we can take an example of what this looks like it essentially allows the brackets that you use in your vs code and in your code itself to have a different color depending on how far they're nested and while this seems like a simple change it has a huge benefit because sometimes you don't know if you've closed off your brackets properly and this allows you to see that visually much easier than otherwise you would i know that half the bugs that i make in javascript are usually related to me forgetting to close a bracket and this one plug-in has saved me lots of time in terms of debugging as well if you're working in a team though there is another plugin here by microsoft called liveshare liveshare actually allows you to collaborate with vs code on a shared project through a client and a host live so you can actually see the code editing in real time with a little cursor if you want you've got some chat in there add different types of per mission so for example if you want someone to just view or edit the code you can do that too i don't have a real-time example of this right now so i might pull that up for you guys so we can have a look at that so here it is this example here shows us how we can have two or more people immediately editing code and we can see what they're selecting we can actually view into their current screen as well as see their cursor as they're editing in real time and they can save these projects essentially so one person can host this project one person can edit it and you can even access the console and run different commands so this is really cool and i've used this a lot in my teams at work as well another one i would recommend is the dot env extension because i'm using a lot of javascript and in most projects i do have a dot env file and just doesn't have any styling this simply adds a little bit of styling to your env file so you can see what it looks like what kind of variables you're passing where there are comments and where there are booleans so i'm just going to install this one over here there's also a really cool extension that i was using in my last video for javascript and this was corecard.js i got a lot of comments about it what it allows you to do is inline javascript commentary so that you don't have to print that out to console this might seem interesting because for example sometimes when you're debugging or checking code you get to see that in real time and you can edit it and see what those changes reflect this is really cool you don't have to use a debugger you don't have to use a console you just immediately type your code and see how it's going i'm going to probably be using this a lot more in maybe some javascript tutorials i do but if you guys want to check it out it's just over here you can install it and it's pretty much free for a community edition it actually syncs with an online cloud server and sends you back this information in real time i hope you guys enjoyed this video on vs code extensions if you did hit like and subscribe otherwise i'll see you in the next one thank you

Channel: Adrian Twarog

Views: 184,749

Keywords: VS Code Extensions you absolutely need in 2020, vscode extensions, vs code extensions, vs code extensions 2021, vscode extensions 20201, vscode, vs code

Id: qWNj3tfVjWI

Length: 10min 19sec (619 seconds)

Published: Sun Feb 14 2021