Top 16 Best VS Code Extensions for Front-End Developers in 2023

hello guys I hope you all are doing well today and today I wanted to make a follow-up video on my setup on vs code but this one will be specific for the extensions that I use and you can see the previous video I think here or here and to watch what is my font how I set up my for example browser sync live server and anything in that regard so yeah today we'll be going over the extensions that I have so to start uh let's make a quick recap on the themes that I use the one that I'm using right now is called a yo it makes let me show you here right quick um for example a home page like the contrast is very good I can read and easily find what I'm looking for in the code and what I made don't fully like is this italic type of text and since it may be confusing on tutorials and you know actual learning um but I really like it the other one that I was using was Andromeda and this one has a brighter background but it has poppy nice looking colors too which these are the two themes that I I'm switching on but I'm actually using Au way more than Andromeda lately so yeah those are the two themes that I'm currently using so the first thing before showing you actual extensions is what I use to view my files let me take down this terminal and many people like all the people I've seen honestly like to use live server and it's pretty good um it's okay but if I'm being honest I prefer browsersync.io um I think it's way better it lets you do way more than live server and you can actually set up a like a link a local host a 192 private server so you can watch your page or your phone uh so yeah let me show you how this works so here as you can see I have a notion page and which are just two steps first what you want to do is well go to the browser sync page yeah get here and then run this command on your terminal let's open it here and copy and paste and it's starting to download um I already have it downloaded so maybe it will give me an error um but it doesn't matter and as you can see it quickly installed the project I don't think this one this is too important to see but for example um here I'm not working with beat or create react app I for example just have an index HTML and these type of projects you can do you can do for example npm round depth I will give you an error because there is no such thing as a package.json and so and so so what I will do is copy this exact command which uh let me show you what it shows as soon as I copy the command which is browser sync Dash sync start dash dash server dash dash directory files and a quote um thingy let me hit enter and then here as you can see on the terminal it gave me a local host and then an external host which I can put on my phone that is connected to the same network and I'll be able to see the changes directly on my phone which is super useful um and this specific code is to you know make a server for the external thingy and make this directory now I click index.html and then it opened the page that I wanted that I have on the HTML so yeah that is how browser sync works I'll leave you the commands and the link below in the description if you want to check it out the next one I wanted to show you is a crucial one I don't know why Microsoft hasn't implemented this function as well the thing is there is a feature there is a setting within vs code to make this work but it only works for HTML it doesn't work for jsx XML and anything in that regard what this led should do is basically if you want to change this H1 to a paragraph you will only click p and then it will automatically change this closing tag which is super useful nonsensical that Microsoft hasn't implemented this fully uh but yeah this is a a super useful uh extremely necessary extension if you are a front-end developer the next one I wanted to show you was better comments uh this one is as you can see just better comments actually way more readable for example if I wanted to say don't write below here it will highlight it in red as soon as it checks for this like admiration mark and for example another one that I use a lot is the to do one here all right to do and then it will set it on orange so I don't know let's remove this component so now when you're browsing through code you can see the comments way better than if they were for example I don't know don't click here which is barely visible on this specific theme but yeah as you can see it's way better it's way more readable way easier to understand the code than to see it quicker to recognize it so yeah there's a no-brainer one two this next one is a very good one if you are a front-end developer and which is CSS Peak what this would let you do is allow like it says how to picking to CSS ID and class string as definition from HTML5 to the respective CSS for example if we wanted to check what this class does what I can do with this extension is hit control on your keyboard and it will give you this like underlying thing to check then I'll click it then it gave me this window which shows so here's the class name what's his this is a an scss it shows like a variable but essentially it's just connecting to this JavaScript color which is given this f o thing so yeah that is basically what it does I think it yeah it checks some IDs you can tap control what you can hold Ctrl and then click it and then you will see what it does exactly on the CSS part so yeah super useful one the next one is error lens I absolutely love this one because it lets me see errors way quicker than vanilla vs code for example if you want to if I were to delete this it will give me on the code exactly what is expected or what is the error with the code because before without this extension we'll have to hover over and it will say oh I need to close this tag so then I will just close it and this works with everything I think um let's for example say this cons yeah as you can see unknown keyword or identifier dimin const and I can just see this extremely quick and not having to hover over every time I have an error so yeah it's a super useful extension which actually makes PS code look better too so yeah it's very good too so this next one is super useful if you want to be a quick programmer if you want to really get good at programming and mail your react actually because this only works on react Redux and react native and but when it essentially does let's say we want to create a new component let's say I don't know it's it's a home homes for example.jsx we created the file and rather than you know doing the whole function I don't know homes the best snippet or the snippet that I use the most is RFC as you can see it is saying react functional component and what it will do is you can just click it and then we'll create a whole function that is exported already that is default that even that it even has the input react and added to so yeah this is a super useful one if you want to or if you're a react developer this is like necessary actually um so yeah this is another very good extension so here the next one you should have these ones just installed as a space um as a base on BS code if you're a front-end developer which is eslint um which what this will basically do is catch more errors and make sure that when you're writing JavaScript everything is checked and everything is working so it will basically give you more errors on the little things you may people vanilla BS code may not show so yeah and this HTML lint is the same but for HTML the best example that I can give you at the moment is this one which source needs to be double quoted let's say we forgot to double quote it and just and it's just one called quote this orange type of error comes from type directly comes from HTML lint hint and which will tell me the value of attribute SRC must be in double quotes so yeah as you can see we can fix it and there we go it's solved and we were able to quickly catch up onto the issue rather than debugging and looking at the console and all of that tedious process um that we may have to do sometimes but this makes it way easier if we're working with JavaScript and HTML so this next one is git graph um this one I'd rather use a thousand times more than the regular git lens I think it is called yeah kit lens I really I really didn't like this one actually I don't know what it was um but I remember being a little bit tedious thus I decided to install git graph um which uh what it does for example this um project that I have on GitHub there is a small text on the bottom left of the screen which you can see git graph let's click it and then it will give me all of this uh which may seem overwhelming at first when you look at it but if you start looking at the things that there is it's super simple for example yesterday I did a lot of commits but for example I wanted to see what Fred did you can see the author here I want to see what Fred did at 43 a.m no 12 43 a.m yeah and you will just click it and then see oh he deleted well as you can see 135 deletions but 11 plus additions let's see what he did oh on this red part you can see all that was deleted from this specific commit and on the right side you can see what was added so yesterday I deleted all of this and it will highlight it on red and then um we can see it on the right what he or I added on this specific commit and it's super useful you can quickly see everything you can quickly see the date the author the specific text that the or the specific description of the submit um by having just a quick lens at this link which it says git graph and this is super useful I prefer it way more than git lens I think this is way more organized way better to see way easier to look at and even as you can see here author committer parent the description the extended description as you can see I don't know if someone did a very big change you can see all of the text completely so yeah I absolutely love this extension so yeah so this next one is called highlighting highlight matching tag and this is one that I use it's not really that necessary actually and it is very custom advisable um what it will essentially do is if for example you want to see when this row ends and you can see right beside the dip there is a little underline which highlights the div so we can go below and we can see that this one is highlighted too so this and this are the rows because we see the underlying highlight which is in yellow as yeah just a quick one very useful one and yeah so this next one sometimes it does work and sometimes it doesn't um as you can see is very faint it's an indentation with the color rainbow as you can see there is yellow here there is green here I think there is pink here but it's basically a like a pyramid you can see it on the left and let's for example say we wanted to disable it so we now have we don't have anything on the left like it's just like dark uh basically it's just the background uh so now if we wanted to activate it back let me find it first oh here it is enable and we can see again the background of this elements on quite a a rainbow color so yeah it's a nice one to have and to make sure you know oh so this is a whole object so there is a space here and then we have another object so it's a very good one to quickly look at code so this next one I'll make a separate video because setting this up quickly maybe sometimes a pain in the ass um what I actually do with this one um I don't get it to watch my CSS as you can see on the top right bottom is a little bit faint due to the um very dark theme but it says watching and which is watching my SAS and I set it up so that it watches as soon as PS code is fired this is due to the fact that I use SAS on almost every project that I do I really like that you can implement it with post CSS and else so it's super useful to have and this is I feel like the perfect um extension to use if you're using SAS um so yeah if it doesn't work don't worry I'll try getting a video as soon as possible just to make sure you have this set up correctly and with all the features in a quick Manner and and simple way to make sure it's set up correctly so yeah so the next one I want to show you was pretty err which takes a little bit of setup I will make a separate video which I'm intending to make it very quick because it's not that difficult to make it work but usually when you install it you will see that that it won't work um so yeah if it doesn't work for you as soon as you install it let me show you what it does let me show you Its Behavior let's say that we are doing this and I'm deleting this this all looks very good but I'm now making it a mess I deleted something of the page too damn for example let's say that we have a heat like this which is it looks very messy it doesn't look nice uh here and let's get this tip let's get all of these tips uh close together and as you can see this looks horrendous this looks unreadable uh so what prettier does is as soon as you save um this file everything will get formatted in the best way the best looking way and and let's see Ctrl s and everything went back to looking pretty nice actually so yeah this is what the prelier does but if it doesn't work right away I'll make a separate video which will be a quick one so you consider it up quickly as well don't worry but yeah this is a no-brainer when it comes to extensions so this next one is for people that I that I use SAS um it works very well well it works extremely well with the previous SAS extension that I shared with you what it will do is give you like hints as you can see here it will give you indented SAS syntax highlighting autocomplete and a formatter for BS code for example let me show you on this color palette scss file what it does let's say I'm going to create a variable called sky and then it will be color I don't know let's say this will make it a color like black um so let's say we want to declare a eye color and then what it will do here which will put color and if we put the dollar sign now here there there it works um we'll hit double thingy and then D dollar then we'll be able to see all the variables that we have written and there you can see a sky so we'll put this guy here and there we go um so this output came from the styles.css scss extension that I had installed which is watching Always but yeah that is what it basically does will give you um highlighting text formatting and everything in that regard so it's very useful if you use SAS so yeah that's another one so here to be finishing the video um I think I have three more extensions um the autocomplete that I use is tab nine I feel like it's the more the most secure one um I heard about another autocomplete AI that was like spying on code basically some some negative stuff but what this one will do is exactly what it says which is autocomplete let's say I wanted to create a function and there you can see it um as a suggestion it is showing uh the text show in Gray so let's hit Tab and then it will create it that is tab line autocomplete and let's close the function and then it gave me a curly bracelet or bracket and we'll hit Tab and then it will open and then it will will close it and then let's say for example we wanted to console lock something oh and then here it suggested me to create a cons which is visible at user playing which is a separate function but what it will essentially do which is when you're writing code it will give you suggestions for example I wanted to make a show function and then here let's log something out responsible.lock close everything let's say yay for example and as you can see all the hard Taps were the actual tap which is what it makes it auto pleat as well it's a previous we want to write code even quicker so the next one is called saywin CSS intellisense this one is what it says which is an intelligence for Tailwind CSS and let me show you what it does for example on this project that I have which is using Tailwind that it has Tailwind installed as you can see here a Tailwind config I think it will only this will only work with till when config and so um like having it installed on the Node modules um if this seems a little bit complicated I'll make a Tailwind video in the future so you can see how to set it up and and everything that you may require but yeah for example let's say we wanted to change this PG grade 900 and let's say I want I want an orange background but I don't know which grade of orange I want so let's hear let's say PG and there this window is basically the extension let's say I wanted orange and here it gave me all the spectrums of orange I will want so let's say well this little orange looks nice let's select this 400. and there we have it and this basically works for everything let's say MD I don't know text Center and you know all of this text and suggestions it is giving me it comes from this extension directly which is the wind CSS intelligence so yeah this is a extremely good one if you want to write until when CSS and the final one finally is the to do three which is um one that I use a lot um is extremely good actually and what it will do as soon as you install it is that it will give you this icon on the sidebar which says to Do's but this will do is look at every file on the folder you have I think it is excluding node modules and so and so but I'll basically do is check if there is any to do written on any file that you have on your project it will basically lay them out here and for example on this navigation bar I have two to Do's let's click this one and it will take me directly to the to do section of this project this is a very good when it for example I don't know here one or two uh uh right to do change and PG color so now I'll just save this file and I don't know let's say I opened vs code the next day I can see oh there is a to-do to change the color to change the background color and it will take me directly to the section that I wrote the specific tutorial so yeah this is a very useful one so there's another to-do on projects data let's click it I don't take me directly to this section in the to do where it was written and is very dynamic you can quickly have a look when I get into a project I will you know always click on the to-do's and I will say oh I have this to do and I have this other thing to do or maybe I don't have any to-do's maybe I can go ahead and go see another project actually the one that I use the most actively because of course top nine and so on is used all of the day but the one that I actually use like actively like I check every time is this uh to lose uh three extension uh which you can see here it is this one so yeah so yeah that was it guys um thank you so much for watching um here is a quick peek on to what I have uh as my extensions that we went over and yeah that was it um if you want to see more of my settings.json and so on on my BS code and the phone that I use you can check the video I mentioned before about my BS code setup but that was all for today and thank you so much guys for watching and I'll see you in the next one bye

Channel: CodeWithFred

Views: 14,911

Keywords: VSCode, Visual, Studio, Code, Front-End, Web, Web Development, Front-end Development, React, JavaScript, HTML, CSS, Microsoft, Visual Studio Code, Extensions, Programming, Coding

Id: Z0yibi_96Hg

Length: 27min 59sec (1679 seconds)

Published: Sat Feb 11 2023