2024: Complete VS Code Setup for Web Development

in this video we are going to Deep dive into the top seven most important vs code plugins of the year the ones that will supercharge your web development Journey like a caffeine infused coder on a deadline hey friends welcome back to the channel and for those of you who are new here my name is shivalik and I'm your tour guide on this wonderful journey of web development if you have landed on this video odds are you're going to dig my other videos too so go ahead and smash that glittery subscribe button it's like a virtual high five which drives me to create more videos like this let's kick things off by downloading vs code let's head on to their website click download and install now that we have got that out of the way let's make this bad boy shine I've gone ahead and opened a project called diary which is from my GitHub and I will open a file here to talk about our first plugin first up let's stop typing code like we are monkeys on a typewriter who even types like this right so the first plugin we are going to talk about is a code formatter called prettier so we are going to search for prettier in the extension Marketplace install it and once once that is done we are going to go back to our code and before this actually works we have one more additional step we have to go to settings and then search for format on Save and turn this on now if I go to our code and hit command s nothing really happens because we haven't even defined the default code formatter so let's go to the marketplace again open the prettier code and there's some configuration needed so we need to tell our vs code Editor to use prettier next time we hit command save let's go to settings once again and here you can see this page key which will show the Json and let's paste this and we should be done now let's go back to our code and notice how this code changes the moment I hit save did you catch that so prettier helps us with very obvious style related issues and formatting inconsistencies and the moment we hit save it actually fixes everything for us now if you pay a little attention to this greet message constant here you'll see it's slightly grade out compared to author for example why is that the reason you can see is when you overun it it says greet my message is declared but its value is never read so next up we going to learn about an amazing extension called es lint which is going to do exactly what we just talked about help us stop doing these super silly mistakes so let's go ahead and install es lint here here it says install pre-release but we want the release version so let's go ahead and do that and as soon as this is installed let's go back to our code and we instantly see there are a couple of things with quickly ugly red underlines they are this way so that we really notice them so so now when I just look at it it's very evident from just the get- go that something is wrong so when I over on it it says greet message is declared but its value is never read so let's go ahead and use this function so now that error is gone but we see there's one more error and let's overun it and it says unexpected block statement surrounding Arrow body now one way is to just look at the error message and fix it yourself or if these are very obvious errors which es lint can fix by itself you can hover on the error click on Quick Fix and click fix this problem and voila the error is gone and our code looks really nice now Version Control is something which is a part and parcel of every software developers life and I'm pretty sure you already have a bunch of git commands handy in your small little CLI tool but this plugin takes your git experience inside vs code to just the next level it's called git lens and let me quickly show what all you can do with this Nifty extension let's quickly go and install the released version once again and once this is installed I can actually go to my code now if you notice at this text right here you can see whenever I'm hovering on any line it basically says change log right in line so if I scroll down to line number 30 and if I click on this it says it has been committed 5 years ago with some more information on that particular commit when I overun this thing you get this Nifty UI where you can actually see a lot more information about that particular commit moreover you can also click and go back to that particular commet in your browser and see more changes now let's see another cool feature of git lens let's go back to our editor and let's click on git lens and now you can click on Commit graph it opens this Nifty window and let's expand this now you have a commit by commit graph of your whole Branch you can basically go back in time scroll and basically see the two changes which we did and then there's one more change in the Upstream which we haven't pulled yet and all this information in a really easy to understand UI one more interesting feature of lenses you can just go to any commit let's say add new blog post and they will have this section called explain AI you can just select the appropriate open AI version for you enter your key and it will instantly give you a brief summary of all the changes in that particular commit now if you're anything like me you're going to really appreciate the next plugin which we are going to talk about which is called git file history it's the second one by Rodrigo pombo let's go ahead and install this and now we can time travel with our code so if I hit command shift p and click on get file history it actually shows the most recent code which we have notice what happens when I click on the left arrow on my keyboard it's basically takes me through the whole journey of this file and I can go back to the very first when this file was created in 2018 and then again clicking on the rors shows me every change this file has gone through with every commit we did this is hands down my favorite git extension which I've been using at least for a couple years now and hey if you haven't worked much with Git in the past and want me to do a deep dive into the basics of git drop me a comment below and I'll be happy to take a dive now before we jump on to the next extension if you look at this code here you can see these lines right which basically is vs code's way of telling you which are the blocks which fold but you can imagine how difficult this might be if there are crazy number of nesting in your code like this particular example and this is exactly where the new extension we are going to talk about comes handy so if I go here and search for indent rbow it's the first one we see here and let's just quickly go and install this now if we go back to our original file we can see now the color coding is much nicer and much verbos to just have a glance at it and see what's happening let's go to the HTML for a better representation and as you can see it's very verbos you can just look at this and it makes scanning through code really easy in my opinion when you're looking at some really really long files these visual indicators actually come a little handy and reduces some cognitive overload from you the next two extensions which we are going to learn about today are GitHub copilot and GitHub copilot chat so let's quickly go and install it and just like before let's install the release versions of them and now that we have them let's go into the code and see some real examples of what GitHub copilot can do for you so copilot is a really really good AI sidekick which has the ability to go through your whole code base and understand patterns which you use throughout your code and also read the files which are open currently in the tab so for example author. JS is open here and we are at test.js so I can come here and add a comment and say write a test to check author's name and now if I go to the next line it's already suggesting some code and as you can see it correctly wrote night rituals I forgot to put my Alexa on airplane mode Alexa turn on on light so let's get back to the video get up co-pilot is also really good at explaining complicated topics like email reject or reject in general so let's say if I want to create a new Rex for something like checking if a string is a valid URL I just have to type cons URL reject probably it will take a little bit of time to come up with a solution and we already have something and maybe I can use co-pilot to write a test for this as well so if I write describe okay it already understood the context that probably this is what I would want to do next and it wrote a test for me oh it nicely also figured out this is probably a nice test domain related to this project say write a test with sub doain and path and now as you can see it's able to write test cases for all the conditions which we actually wanted it to correct to as you can see this is super Nifty now going back to the other extension which we installed GitHub copilot chat this one answers all your questions just like chat GPT but the advantage of this is It's been specifically trained on millions of open source project which are on GitHub so if it knows anything that's coding so now I can come here and ask it even general questions about coding like how to create a safe pass password for example and let's see what it comes up with so already you can see it gives some nice information and also it comes up with a function to generate a safe password and it also says there's one vulnerability in this particular one and now you can probably continue this back and forth with co-pilot chat to understand your code better you can think of GitHub copilot as your personal T overflow expert who's sitting next to you and whenever you ask questions doesn't taunt you and give you answers and also example code some more interesting things you can do with with GitHub copilot is use the ad selectors and Target issues specific to the terminal your whole vs code and your workspace so when you target workspace basically you can ask it any questions about the whole file system for the current project for example I can ask it to generate a read me about a file we haven't opened yet or maybe use terminal to debug some terminal errors which we got because maybe we had a typo in our Command and the terminal had no idea how to fix it and neither did we but now thanks to copilot chat we can use it now one thing to mention here is GitHub co-pilot is not free like you can only get a month's trial and after that it's roughly €10 or maybe 8,000 rupees per month so you should totally use the trial and consider whether it's a good investment for you or not now that vs code extensions are out of the way I really want to talk about something which is very close to my heart which is developer experience so by developer experience what I'm really getting at is small nonfunctional but more user interface or behavioral changes which we can set up in vs code so so that daily interaction with the code editor is much more fun so the first thing I want to talk about is the code panels position on the left so again this can be a little opinionated but hear me out I use a lot of keyboard shortcuts when I'm working on the code editor specifically command b or control B which basically is a shortcut to fold this code part on the left so when I'm concentrating on a code or reading something let's say I have multiple pains out there and then I just want to focus on some code I can just quickly press command B and the code fold but if you're really focusing on some part of the code your attention breaks when the whole code kind of moves to the other side so I like to move this whole code editor window to the right so how do I do that I click on this option customize layout and here you can select right so now if you look at it when you are focused on some code if you fold it or not basically the main window which you're working at doesn't really change although this might seem like a trivial change but then I spend a lot of hours everyday looking look at my code editor and smaller changes like this actually add up and make the overall experience just looking at a black window less painful or more fun so the next thing I'm going to talk about is font lies so font lies if you don't know about it let me quickly explain with an example so if you look at this code we have these signs like lesser than equal to or triple equal to or the arrow function sign so these are in some way a little bit computery if you're writing these on a piece of paper probably you'll write a lesser than equal to slightly differently so font lies basically lets you install certain fonts which convert these signs into something which is more readable for the eye and that in a way helps with less cognitive overload so when you're just scanning through some code it's just a little bit easier for your brain to process less information and still get what you're looking at so to set up font lates there are actually insane number of options out there there are so many really nice free fonts the one which I'm going to use today is called jet brains mono and I'll show you how how to set it up but for some reason if jet brains mono is not your type I have listed down in the description box seven free font Lees supported fonts which I have used and really loved so let's get started first thing first we have to go to settings and let's search for font lures and you can see edit in Json here and let's change this to True after this you go and install the font to your computer which I have already done so next I will go here and type editor font family did you see that copilot is already suggesting us the font editor font family fed code no we actually want to use dead brains mono so I just hit save and now if we go back to our test file you can see how these signs have actually changed so just for a side by side comparison I can bring it here and let me go to the code and let me commment the fonts out while you can just look at how the ligatures change so as you can see once we have the font enabled it basically takes the arrow function makes it a little nicer it takes the trip simp equal to makes it a little nicer also the lesser than equal to is much more easily readable right now the next thing which I absolutely hate is the mini map which serves no purpose in my opinion I first started coding with the editor called Sublime text and it had this mini map which I got really fascinated about but as in when I started using more editors I got to know this is something I don't really use much so if you haven't used Mini Maps this is basically a small picture of the whole file so you can just go to some particular part and it is particularly useful if the file is really really long but that is kind of counterproductive because if your file is wrong then you must be splitting your files already so I will just right click here and disable the mini map so that we get a little bit of extra space here one more thing which is a really nice DX enhancement is when you go to the search in vs code and search for something which is very obvious like return and you get millions of results here right and it's kind of hard to read what's going on here and usually what I've seen all my fellow developers do is expand this try to find the result and probably minimize it again or hit the command B option so instead of struggling here to find the result what I really like doing is drag the search down to the bottom here and now when you search for something you have way more space to actually go through it you can also expand this to a full page view and it's much more easier to see a full line of sentence so if you have been using vs code for a while you must have noticed that this file name is pretty useless as in if you have a really small project with three files probably yeah but if you go to a file like this where probably there are hundreds of index.js file all of them would just say index.js so a nice DX Improvement I use instead is to go to settings once again and once you go to the code Define how you want the path to be so now if I save it it gives me the whole path and as in when I change the files I can see the whole directory of the file which is very helpful in my opinion so you cannot really talk about developer experience without talking about themes right and when it comes to themes and vs code they there are actually way more options than there should be so I'll show you what my favorite theme is and I'll tell you what kind of themes you should never get to harm the performance of your vs code so the one I use everyday is called GitHub so if you search for GitHub and go to GitHub themes and once you install it there's something called GitHub dimmed which is my favorite this gives me a really nice contrast for my taste but you can choose whatever you like but when it comes to themes you should not be using at all is something like this really cool looking fortnite vs code theme this is something I installed at some point because it looked very cool it also has some animation and stuff going but at the same time there are many themes including this one where they basically ask you to do some override which replaces actual vs code files and make your vs code kind of unstable so if you're running a lot of servers and maybe a Docker in the background sometimes your vs code is very laggy and for example on even my computer which has a crazy 32 gigs of RAM I've seen performance issues when using crazy themes like these ones which actually makes your code editor a bit slower and messes up the developer experience all together so there you go friends I hope you learned something new and if you did hit the like button below and talking about DX what about this amazing subscribe button DX which you should totally click and see what happens and I hope you had a good time and I'll see you on the next one

Channel: Siwalik Mukherjee

Views: 9,772

Keywords: productivity, software engineer, siwalik mukherjee, vscode, bscode, visual studio code, brew install vscode, neovim, vscode extensions, vscode tutorial, extension, vscode setup, vs code, vs code extensions, vscode extension 2022, vscode 2022, vscode 2023, programming, visual studio 2022, increase productivity, productivity tips, ali abdaal productivity

Id: NgWr4ikzzgU

Length: 16min 23sec (983 seconds)

Published: Tue Jan 30 2024