Top VS Code Extensions for Web Developer in 2024!! GeeksforGeeks

Key Takeaways

so hey everyone I'm Hershel Jan your Mentor at Geeks for geeks and in this video we're going to talk about top 20 vs code extensions and shortcuts which every developer or a programmer must know so let's begin so guys the first extension which I really like is vs code icons so remember when we just use normal icons in vs code and you can see they seemed fine but uh what I want is I like to make it something better so what I can do is I can just go for an extension and just can type for icons whatever you like it's not compulsory you can go for other type of icons also but personally I would go for vs code icons because all of the icons would be supported here so if I just install this you can see it's installed and this is for the default vs code if you like the default extensions then that's great but right now I've installed a new extension I'm just going to select this once I select this now you would see that the icons have actually been changed so you can see they seem now a bit better and like they look pleasing okay so it's just for theme purpose and a very good extension which I really like now the second extension which I really like is too highlight so let me first of all install this so you just need to search for too highlight so once you write this you can see we have too highlight extension and it would actually help us to uh just highlight our toos for example you can see you have a list of TOs and you want to highlight that so let like you often forget something or you want to do something so in that cases you want to highlight them later on if you want to perform some task so what you would do is just make it as a to-do mark it as a too so it would be highlighted so for example if I just go to this index.html if I just create this boiler plate let's try to create a H1 tag right now okay and I'll just say hey so if I commment this I just need to press control and forward slash so you can see right now it's like this but you can see still it's not highlighted it's not highlighted so what I would do is if I write to O the U and colon so you can see now it's highlighted okay so now I really know that I want to perform this task and this is just a command but I can write something that uh write uh uh logic to do something okay if you want to do something and you know that this is some pending work which I'll finish later on so to actually remember this you can actually write it as a to-do so it would be highlighted and it would be really useful when you forget things and later on you want to know that what was spending so you can really know by just typing like this okay it's very beneficial and actually we have one more thing that is in uh if you want to fix something instead of this uh you just need to write fix me okay and colon so you can see fix me is highlighted like this right so you can go through the extension you would know more shortcuts but these are two very famous shortcuts too and fix me if you write it like this too and colon sign you would get this color Okay WR this and fix me is like this okay so this is a very great extensions and you can use it if you forget things a lot that means you want to fix things later on and right now you are just leaving them so just write it as fix me colon so it's very beneficial now the third extension guys which I really like is indent rainbow so it's like uh it would actually give you colors okay it's just a very great exential so that your code doesn't looks messy and you really like to code more okay so you just need to search for indent rainbow and you can see this is the extension if I just install this can see that it would actually makes the ination it would make the interation very easy so right now you can see that uh if I just remove this and I try to write something okay so if I write H1 I write hey and then let's create a division and you would see that we have something like this so right now you can see in the HTML it's totally like you won't be able to see this but let's write some js okay so if I write Division and okay I'm sorry if I write a JS so I would just write script and here itself I'm writing my JavaScript so I'll just say for example first of all console log this then let's create a function so function uh let's say the function name is greet okay so greet function and inside this we want to do some things for example we have a for Loop and you are doing something so you can see you are getting these rainbow indentations in this you can see some gaps and look coool you can see this is what I mean rainbow indentation simply means you can see you are getting this color okay it actually gives more separation and makes it easier for people who really are confused with the gaps okay so very beneficial if you're are using a very small screen so yeah it would be very helpful so you can see the separation very easily like this okay so you can see I have these colors I have these colors right so between the spaces I have these colors so very beneficial now the next one is actually the colorize extension so if I just search about it I just need to type coloriz coloriz so once you write this you just need to install this and it's very useful for the CSS for example example if I have some CSS and inside the style tag for example if I say that uh if I suppose say background color and suppose now if I just write RGB and if I just say that this is what 0 0 and zero okay right and what I'm going to do is uh instead of this let's let's choose some red color okay so if I choose a red color so you can see that right now I'm not able to get this okay I think it might be because of uh the CSS file okay what we going to do is let's let's go to the CSS file and there let's try to use the same thing okay so if I just cut this so guys here if I just paste the color and you can see that it would be highlighted okay so very beneficial you can see now since it was the red color it's highlighted suppose if I make it yellow so you can see it's also highlighted okay so very beneficial and like it would let you know which color you are just showing here so you don't need to look into your design again and again so like it makes sense okay now very helpful extension which I always use is peacock so you just need to search for peacock and I've already installed this but you just need to search for p e a c o c k okay so peacock extension and mine is already installed you just need to install this once after installing what you have to do is first you need to press control shift NP and this would open your shortcuts and here what you have to do is you just need to search for peacock and you can see we have at the top we have changeed to favorite color so if I just hit enter so you can see I have a lot of shortcuts here and options here to change the color so it's very easy to use and if you have another vs code window open so uh for that you can use peacock separately and you can do the same with different color okay so now you know the separation it helps you a lot and makes the we the window look cooler right now we have some code helpers which are really useful so let's talk about them now guys a very useful tag which we have is auto rename tags so Auto rename tags if I write this it would be very useful when you're using HTML or you're using react CHS or next CH where you have tags okay you have tags so what you can do is for example um if I suppose want to name it as a suppose uh body Tex for example so you can see both of them actually change although you won't be naming them as body but still so again let's make it div so you can see D became a div and let's say I want to create a H1 tag and if I close this and uh you can see it's done suppose if I want to change this H1 to P tag so you can see automatically the next one also changes so that's actually Auto rename tag right then guys we have a very popular extension which I personally use a lot which is GitHub co-pilot okay so if I write GitHub co-pilot GitHub copilot so this is actually a paid tool and this is a basically a paid AI uh code generator so if you just install this this and you need to just connect with your GitHub account so if I uninstall first of all and let me just install this once you install this you what you need to do is you need to use GitHub okay you need to connect to your GitHub account it would ask for your GitHub login you just need to login and your GitHub must have active co-pilot subscription if you have that then after that what you can do is you can see that I'm getting suggestions okay so if I if I say suppose div okay and then if I just say suppose we have a ptag inside this suppose let's say name is uh name is what John do okay you can see it's giving me automatic suggestion and you can see I'm getting the age also and similarly you are getting some address so you can see this is a very small reference but yeah you can use it for a lot of purpose like basically I use it for a lot of my projects either front end or back end so very beneficial for code generation right so you can use this but yeah this is a paid tool so if you want a free alternative so we have another extension which is actually tab 9 just type tab 9 here and this is another paid uh it's it's actually paid software but you get some free uh usage also so you can use this for free also right and this would again ask you I think for login and once you login then you would see that there are some steps so you can see that it's starting okay it's starting and what I'll do is I'll just accept all from here and then after that you can see that tab 9 starter is here so if I just write tab 9 hub can see this is also some Hub if I go to starter yes so you can see that it's giving me some uh example how you can actually use this but at the end your tab 9 is installed so again instead of GitHub copilot now you can use tab 9 for the shortcuts okay so for example if I if I write where so you would get suggestions from tab 9 instead okay if you don't have gith up copilot now you will get suggestions from tab L since I have H so you won't see the difference but yeah if you want tab 9 that's free you can use tab 9 okay that's alternative of GitHub co-pilot right now guys at the end we have uh one more important shortcut that is the prettier shortcut so p r e t t i e r okay so prettier shortcut is basically for formatting the code so prettier you can see just install this this used for formatting the code so it's like when you uh forgot to format the code for example if you give a lot of space here okay and what you do is just just press control the shift alt and F okay so you can see it's right now it's asking for configuring because we installed prettier configure first time so you can see which one you want to use I want to use prettier format so just I hit this you can see that it's formatted automatically if I give a lot of space you can see it's a bad format okay again if I give some space here extra space here it's a bad format now if I just press alt shift and F you just need to press alt shift and F I'm sorry just need to press alt shift and F every time when you want to format and for the first time if you want to format you have just install it then also you have to press alt shift and F okay alt shift and F right this was the shortcut now guys after this we are going to talk about some very popular shortcuts which I use a lot first shortcut is opening the command pet which is the shortcuts window okay so for example we used uh peacock right we use peacock so what we can do is we can either open the command pilot from here you can use a lot of command you can go use a lot of command whatever you want to use you have a lot of commands here suppose I want to use peacock extension to change color so you can see I typed peacock and it would allow me to change color but this was not a shortcut you can see I went here and then type this so one good shortcut is control shift and P once you write this you get the same command pilot okay so this is the first shortcut which we talked about now the second thing is actually used as searching files okay so searching files if you want to search something so what you can actually do is you can just press uh control R shift and F and you can see we have the search window here so if you want to search suppose i n d so if I write i n d uh if I write I end you can see that I'm getting text inside the file okay so if you want to search the text inside the file like this if you want to know that where has I be used everywhere so you can see you would be highlighting all those places so if you have made a mistake or you want to find some specific keyword in each file so you can easily find this right so very beneficial now we have one more thing that is multiple cursors okay so for example uh let me just uh close this now and here you can see that right now suppose we have some division okay some you can see we have this division so I'll just copy this and paste this and paste this you can see they look similar they look similar suppose I want to change the name everywhere so how can I add multiple cursors so for this guys what you can do is you can just press alt and then you can press this and then you can press here so you can see that there are multiple cursors now you can actually change the name all together okay so h a r s h l gen right so you can see it's very easy so this is the first way now the second way is I want to change herel Jen everywhere wherever I want so I would just select one place and then what I would do is I would just say control and F2 okay once you once you press control and F2 so you can see wherever heral gen is available it would be selected so again you can just make changes anywhere suppose if I just select this hello world suppose I select this hello world and I press control and uh shift and control and F2 you can see that we are able to select this hello world together so we can now make changes together okay so very beneficial very easy shortcut now guys after this we have one more shortcut that is if you want to delete a nine suppose I want to delete this n so I just press control shift and K so you can see I easily delete this so I don't need to press backspace and it would delete one by one I can delete it by just typing control shift NK now guys after this we have one more shortcut that is if you want to delete a previous uh previous word not a not not a character if you want to delete a previous character you can just press backspace but if you want to delete a previous word what you can do is you can just press control and backspace control and backspace control and backspace you can see that's how it works right so I hope you understood this if you want to select a specific uh word like previous word or sentence what you can do is for example right now you are here right now you are here but you can do is you can just press control shift and left Arrow if you press left Arrow it would select the left word if I press uh right arrow you can see it would select the right word okay so that's how it actually selects any word now you want to use it you can use it anywhere right then guys we have one more shortcut that is move line up or down so for that what you can do is you can just press alt and up Arrow so you can just press alt and I want to move it up so up Arrow up Arrow up arrow down arrow down arrow down arrow so very easy to use and very good shortcut right now the next shortcut is to comment line suppose you want to comment this hole what you would do is you just press control and forward slash so you can see I can easily comment the whole uh set of Lin so it's very convenient very easy to use this is a very good shortcut and now suppose I want to undo changes so undo changes is another shortcut so if I press control and Zed so you can see undo change is here right now after this we have one more good shortcut that is autosave shortcut so this is a very good shortcut which a lot of people not do not know they just press contr s every time they want to run the code so for those people they can simply go to settings and in settings you just need to search for Save once you go to save you can see that first of all your auto save must be set to after delay okay and then you can check the settings and you can see that auto save delay is 1 second so after every 1 second the save file would be saved and I think that's it and you can check the settings if you want uh see before run always automatically it would be saved before run and then I think these were all the things which I wanted to tell you okay yes that's it so now you can see that as soon as you make a change as soon as you make a change code would be automatically saved automatically save you don't need to press contr s if you close this window and restart vs code your code would be automatically saved you don't need to rewrite the code okay so your code is saved and now you don't need to press contr s again and again okay very good shortcut now one more thing is if someone wants to uh like find something so they can just press control shift and F and this is actually known as for known for found finding if you want to find something you directly find it from here this is a shortcut we directly talked about so this is also known as a global finding or you can just press this search bar there also you can get this very easily right now after this we have one more thing that is if you want to the remove this sidebar if you want to remove this sidebar what you can do is either you can press this or what you can do is you can just press control and be okay this is a shortcut so guys I hope you understood this video and these were some shortcuts and extensions which I use personally and they are really popular and this really save a lot of your time so I hope uh you enjoyed this one and if you want more such kind of tools and extensions you can comment below and we'll bring part two on the same topic so that's it for today I will see you in the next one till then have a good day bye-bye