12 VS Code Extensions to INCREASE Productivity 2024

whether you guys have just started out on your programming Journey or you've been coding for a little while now you may have come to realize that a healthy coding environment is essential for optimizing your productivity and quality of work that is why today we're going to be looking at the best vs code extensions that I use in my day-to-day work as a full-time computer science student you're only going to need three things in this video a computer or a laptop that has the ability to turn on an internet connection that allows you to browse the web and an IDE also known as an integrated development environment in this specific video we'll be using vs code you may have come across it before it's quite an underground application it's my personal favorite so that's what we're going to roll with I'll leave a link in the description for you guys if you want to download that bad boy once you have downloaded and installed set application you'll be met with a welcome page which is very nice close that ASAP cuz you will not be needing it so the first thing that you guys are going to want to do is head over to the extension section here it looks like a little window and we're going to type in code runner in the search bar there all right now that will pop up and it'll be the first one with 24.5 million downloads at this time and then you'll see it's got 4 and 1 half Stars so it's trusted it's a very good extension and you'll notice this little play icon appears up here so what we're going to do is we're going to test it out right now so I've got this little test Java file here um I'm going to drag it in as you can see it's just a simple hello world program and then I'm going to navigate my way up here and then click the play button now you'll notice that hello world is output down the bottom here so what vs code is doing here is instead of manually needing to compile our classes in our Java file it just automatically comp compiles them for us when we click that run button and then it will print that output for us as well so what happens usually in order to compile a Java class is you need to open up a terminal and use the Java C command to actually compile that class and then after that use the Java command to actually run the application so as you can see it's a bit of a tedious progress if we wanted to do that over and over to check changes quickly in our program so what code Runner does is it streamlines that process and makes it a lot easier for us to quickly check what our program is outputting and I would say that is the most essential vs code extension for me so I 100% recommend you guys add that right now so this is basically going to be our little AI coding assistant it's basically going to read what we're typing in real time and suggest things that it thinks that we want to type out in our code so what you're going to want to do here is press the install button and you'll notice here down at the bottom we're going to get a little popup that says sign in to use tab 9 so we'll click that and then open it up in our web browser I'm using Safari for this tutorial but you can use what you like then we're going to need to sign up and create an account and then go ahead and click that create account button then we're going to get a little prompt here saying that we need to sign in using an authentication token so what we're going to do here is copy this token after you guys have copied that token we're going to go back to our vs code and we're going to open up our Command pallet so we're going to do this by pressing command shift p on Mac or control shift p on Windows and then we're going to type in tab 9 sign in using or token and then we're just going to click sign in here and then we will get a prompt here telling us to enter our or token so make sure you paste that authentification token inside the prompt there and then press enter and then you'll notice after that we get a little notification down here saying that we are signed in now you may also notice that there's a red exclamation mark down here you'll just want to click that and it'll open up our tab 9 Hub in our vs code and it's just telling us that we need to verify our email so make sure you go inside of your emails and verify that really quickly as you can see I go into my gmail here I go and I see I've got a new email from tab9 I click it and then there is an option to verify now after I click that it'll send me to this web page here notifying me that I have verified my email address after that navigate your way back to vs code and you'll notice that that red notification telling you to activate your email address should have disappeared if it hasn't just wait a little bit longer and it should disappear and then after that we are ready to use tab n so what you're going to want to do is create a new file or drag in an existing file I've just created this file test. Java on my desktop here and I'm dragging that in it's completely blank so we're starting from scratch I'm going to create a class called test and then we're going to wrap that here in parenthesis so you'll notice that as we go to the next line in our code tab 9 is already suggesting what it thinks we're going to want to write next in our code so in Java the first thing you need to do is create the main method and that's what it's suggesting that we do here so the way that it works is it suggests what it thinks we're going to write next and then we can choose to press the Tab Key and that autocompletes the suggestion for us if we don't want want to write what it's suggesting to us we just keep on typing what we were going to type originally so you'll see here that it's suggesting to me to write a system.out.print line method with the text hello world but I actually don't want to do that for this particular program so what I'm going to do is just write what I was going to originally write instead so I'm going to declare an INT variable here I'm going to call it I and I'm going to make it equal to zero and then you'll actually notice it suggests a while loop here for us so it has the complete while loop already typed out for us all we need to do is press tab if we want that code to be generated so what's going to happen in this simple program is it's going to check if I is less than 10 and if it is we're going to print out I and then we're going to increment the value of I by 1 so we should get an output of 0 1 2 3 4 5 6 7 89 on individual lines and so what we're going to do is we're going to navigate up here to the top right hand section of our vs code and click our run button and then you'll notice that our program is outputting as expected now you're probably thinking that's a really cool feature that tab 9 has but there's one more thing that makes it even cooler so what we're going to do is we're going to navigate our way down to this panel on the left here and you should see this icon that's popped up since we've installed tab 9 so this is the tab 9 logo and what we're going to do we're just going to click on it here and you'll notice it opens up an AI chat feature I'm going to type something in here like write me a Hello World program this is very simple but just for the purpose of this video I'm going to be showing you what it's going to do so as you can see it generates us some code here and what we're going to do is actually click that insert button there and it'll automatically copy and paste that code into our environment here into our file and I'm just going to remove the public keyword here cuz we don't need it it's a very small file that we're working with so once we've done that we're going to save our file and then we're going to click our run button up here okay now we should get an output that says hello world so you'll see that the code generated by tab 9 Works um you know it's not faulty there's not any bugs not any bugs that I've come across in my time sometimes you have to change a few things like I had to do there I had to remove the public keyword in order to get it to run just Tinker with it a little bit you'll find that it works 99% of the time now I know that a lot of my subscribers are web developers so this next extension is very cool we're going to go into our extension tab here and type in Live server now this is a very cool extension and absolutely essential if you guys want to be professional web developers so install that right now if you haven't already and down the bottom you'll notice that we get a little popup here that says go live so what that's going to do is it's basically going to allow us to simultane ously code and see what the changes we make in our code are in our actual browser so what I'm going to do here is open up a project that I've been working on this is the previous tutorial that I put up on my channel now when I'm in my index.html file and I click that go live button you'll notice that the program that I've been working on is going to open up in my web browser and I don't manually have to open up the index.html file from the actual folder that I'm working in so that's really cool now you'll notice here I'm going to go back in and I'm actually going to remove the stylesheet from my program so I'll just comment it out now and then I'll make sure that I save my file and then I'll go back into my web browser and you'll notice that straight away after saving the file all my styling will be removed from my program it allows you to preview your project in real time you don't have to continually save the file and then open it back up in your web browser close it again save the file it just automatically does that for you when you save your file in your IDE so that's very cool highly recommend that now let's move on to the next one this next extension is very useful for data scientists or data analysts have you ever been programming in vs code or your IDE and you wish that you could just view your Excel spreadsheet inside of vs code without having to navigate to a completely different application well this extension does it for you so let me show you what happens when we actually drag an Excel file into vs code without having this extension installed okay as you can see I've got this employee sample data here I'm going to drag that into my vs code and then we'll get a warning message here that says the file is not displayed in the text editor because it is either binary or uses an unsupported text encoding I'm just going to click this button here that says open anyway and just select text editor here now this is what our spreadsheet looks like inside vs code right now so as you can see this is completely useless we can't use any of this data we can't see any of it even so what I'm going to do here is navigate over to my extension Tab and I'm going to type in Excel viewer inside the search bar here okay now it's going to be the first extension that pops up here by grape City and all we're going to do is install it okay and then we're going to go back here and we're going to drag our employee sample data back in and look what happens we have a beautiful spreadsheet displayed in our vs code without any errors we can see our data nicely formatted so that is the beauty of this extension guys if you're a data scientist or a data analyst this is such a powerful tool it helps you visualize your data without actually having to navigate from vs code back to excel back to vs code and so forth and I highly recommend that if you guys are studying data science or data analytics make sure you have this extension installed on your vs code so this next extension is very cool as well if you guys are needing to present your code or you know just show a walk through of how your code Works whether it be to employees or your friends family whoever this is a very cool extension that you guys can install it is called code tour so it's going to be this one here by Jonathan Carter so Props to him for creating this extension it's very cool what we're going to do is just install that here and then we're going to drag in a project that I am actually working on at the moment uh you guys can drag in any project I'm just using this for the sake of the tutorial and you'll see after we've installed our code tour extension we'll have this little code to a tab in our Explorer of our vs code here now what we can do here is open up any file it can be a HTML file CSS you know javascripts SQL whatever you want um and we're going to click this button down here record tour now we're going to get a prompt up the top here that says specify the title of the tour or save it to a specific location so this is just naming our tour I'm going to call it HTML tour for now and you'll notice that a new tour is created down here on our left now just for this example say that I wanted to explain to somebody what the body section of my HTML was doing okay so instead of commenting what each line does I can actually go to the line in my code here and I can click the plus symbol over here on the left now a prompt will pop up asking us to type a new comment so for this example I'm just going to type in create div container to hold contents on notet taking app now what I'm going to do is go down here and click add step to tour and you'll notice we get a popup here and it is the start of our tour so this is going to be the first step the first point of our tour if you will and you'll see we've got our comment there and it's going to be step one of one all right so what I can do to exit that is just click this little arrow here and then we'll go to the next line and create another step so I'm just going to write second step of our program and click add step to tour now you'll notice that there is also a previous button here that pops up this navigates our way back to the previous step that we just created which was creating our div container and then you can click next to go to step two of our tour and as you can see the steps also appear over here on the left in our Explorer let's go to this line here and create a new comment creating list header and you'll notice that we have another step that appears on the left here in our Explorer now I'm going to create another step and just say use icon from font awesome and then I'm going to add that step to the tour as well you'll notice we get that added down the bottom in our Explorer now let's run through our code tour from the start so I'm going to close that and then I'm going to click HTML tour here and then I'm going to go to the first step and then I'm going to click next and that's going to go to step two and it's going to navigate to that line step three and then I'm going to click next again and you'll notice that each time I go through these steps we just get a little tick here as we've completed them and then I'm going to go to my fourth step here you'll see step number four of four and then I can click either previous and go back and look at the different steps that I've created if I want to review them again or just finish tour there now you'll see that the green tick appears at the top of our tour and that means we have finished we can always redo it again you can do it as many times as you want now you'll notice that we can also edit the steps here as well so once you've created them it's not set in stone you guys can edit the comments so that's a very cool feature as well so this next extension is very cool we're going to go to our search bar here and type in to-do and then we're going to click the first one here called to-do highlights we're just going to click the install button there and then afterwards just open a file of you're choosing it can be any file you want now you'll see in my Javascript file here I have a function called Update note okay say I need to do something later on inside of my uh Update note function to change it or something you know we need to uh we need we need to alter it somehow so what most people would do when they first start out programming is they'll put a comment above the function that they've written or inside the function just to remind them that they need to do something later on whether they need to alter it fix it whatever they need to do just to get it working they'll write a comment there just to remind them now by all means this is a great thing to do but the problem with this is in large scale projects your comments can get lost in your code very very easily so with this extension to-do highlight what's going to happen is we're just going to use a keyword to-do here and then we're just going to put a coal in and then afterwards we're going to write our comment so you'll notice there that our to-do section is going to be highlighted in a bright yellow now this is very beneficial because when you're scrolling through a lot of code you can easily Miss like like a lot of comments so when you see this big bright yellow highlighted text appear you'll be like oh yep there's my comment and then you'll be able to go and fix it accordingly now if for any reason you don't like that bright yellow color you can also use a bright reddish color and you can use that by typing fix me in capital letters and then a colon and then write your comment after that and now your comment has a nice red highlighted section there that stands out now if for any reason this extension is not working as expected like you can't see the highlighted section appear what we're going to do is open up our Command pallet on our vs code so on Mac this is command shift p and then on Windows it's control shift p and then what we're going to do is we're just going to type in toggle H now you'll notice this little popup here that says to do highlight toggle highlight make sure you click that so in this example I've already got it set up so you can see that my comments are highlighted but if I toggle H here in my command palet and press enter you'll notice that the highlighted section disappears so when you first install the extension just make sure that you go into your command pet and type in toggle H and press enter just to ensure that the extension is working as predicted the next extension is not so much productive as it is decorative I'm just including it because I like my vs code to look aesthetic and clean and I think that incorporating this extension just adds to the overall aesthetic of the development environment so basically how it works is I've got a few files open here you can see index.html script.js and style.css now the icons that represent those files look okay but they don't look amazing we can make them look a whole lot better and we can do this by going to our extension section here and we'll just type in material icon now it's going to be the first one that pops up by Philip Keefe and we're just going to install that one here okay and it's going to prompt us to select a theme once we have and we're just going to make sure that we select our material icon theme now if I close that and go back to Explorer here inside of our folder our index.html file our script.js and our style do CSS files all have really cool icons next to them and they'll also appear up the top there in the tab section so I think that just looks a whole lot nicer than the built-in vs code icons that they provide uh you don't have to do this like I said before but I just think it adds to the overall Aesthetics of the program this next extension is an absolute Game Changer if you guys have created a large or medium scale project you'll know that creating a uml diagram is one of the most beneficial things you can do before you even start coding now in order to create these diagrams you need to use a completely different piece of software or a web application to do so now whilst that is great and they're very powerful tools if you guys just want something really quick to use this is one of the best extensions that I have ever come across so what we're going to do here is we're going to navigate over to our extension tab here and we're going to type in draw IO we're going to click on the first one here and just install it and then I'm going to go over here into my folder I'm going to create a new file and I'm just going to call it drawing. draw iio so what's very important here is that you guys add the draw IO extension otherwise this won't work and now as soon as we do so you'll notice that an offline version of draw iio will appear inside of our vs code and I can go down into the general tab here and drag this rectangle in I can drag this cylinder in here and then I can also drag in this line and I can connect the rectangle to the cylinder I can then make that cylinder as big as I want it to be and then I can label it database for example and then I can label the rectangle up here server so this is just a quick diagram linking our database to our server you can do a whole lot of other things too you can link classs lists whatever you guys want you can also change the colors of all these different shapes as well so make it nice and appealing and once you finished creating your diagram you can go to the file section here and then click export and then you can export your file as an SVG file a PNG file or a drawer IO file so I use this extension all the time guys it's very useful before you're starting each of your projects to create a diagram just to visualize the overall structure without having to chop and change between different programs so having everything in vs code just helps tenfold this next extension is super cool essentially what it allows you to do is produce really high quality code Snippets if you have a snippet of code that you need to show to somebody and you need to present it in a professional manner this is a really good tool to help you with that so the extension is called polar code all right now it's basically a Polaroid for your code that is their tagline if you will but what you want to do is make sure that you don't install the first one that pops up you want to install the 2022 version so the original version actually had a lot of bugs and it ended up breaking back in 2019 so make sure you guys install that cuz it is the actual working version and is up to date next I'm going to navigate my way to my script.js file and I'm just going to bring up my command pallette inside of my command pet I'm going to type in polar code and then press enter and you'll notice that our polar code extension pops up here on the right so as you can see we're presented with this snippet of code that just outlines how we use the extension so what I'm going to do here is just make this a little bigger and I'm going to highlight my close popup function here okay now you'll see as soon as I highlight it in real time it will be converted over into our polar code extension here and we can see a preview of our code snippet now we have two options here Shadow and transparent if I click Shadow I can toggle the Shadow on and off and then if I click transparent I can toggle the transparency on and off so if I want a nice little background there I can uh turn the transparency off and then choose a color for the background I'm just going to use this nice purple color now we'll click this little icon down here and this allows us to export our code in the form of a PNG file and then as soon as I click save you can see that it gets sent to my desktop here and I can open it up and I've got this beautifully formatted piece of code that's ready to be presented to anybody of my choosing so I would highly recommend that you guys install this extension especially if you present your code to people quite often now this next extension can be an absolute Lifesaver what I'm going to do to demonstrate how useful this extension can be is I'm just going to drag this test. Java file off my desktop into my vs code and then as you can see I have this simple test class here inside we've got our main method and then we have a Boolean declared here called B and it's equal to false and then we just have a simple if statement okay so if B is equal to false then we print out bullan is false and then if B is equal to anything else which it can only be equal to true then we're going to Output Boolean is not false now you may notice a couple of issues in our code here pause the video and see if you can spot them so if you guys did notice when we've declared our Boolean variable here our Boolean keyword is spelled incorrectly it's meant to be b l e a an instead of b o l e a an so when we compile our code in a second here we're going to come across an error that could have been avoided if we had this extension installed you'll also notice that in our first print line function here we've got a sentence that has a word spelled incorrectly while this particular spelling error won't actually stop our program from running it's very important that we do fix these especially if you guys are deploying this in a professional workspace as you can see here when we run our code we have a compilation error on line four of our Java file now this is good we've identified the error and we can go fix it accordingly but what would be really nice is if we never had to encounter this error in the first place so what I'm going to do here is I'm going to go over to my extensions and I'm going to type in code spell checker now it's going to be the first one that pops up here by Street side software and you're going to do is click that install button now let's go back to our Java file here and the first thing that we're going to notice is our Boolean keyword is underlined blue now much like Microsoft Word and many other applications this extension is able to identify which words are spelled incorrectly inside of our code and it will let us know what needs to be fixed you'll also notice here that in our print line function it has correctly identified that the word false has been spelled incorrectly so what we can do now is we can hover over our Boolean keyword that's spelled wrong and we can click Quick Fix and what it's going to do is is it's going to suggest us words that it thinks that we were going to type out so as you can see we've got bullion here the second from the top and if we click that then it'll just quickly change our Boolean keyword to be spelled correctly if you don't want to use that quick fix function you can just manually type it out like I've done here as well now you can see here when we run our code we have a perfect output with zero errors you'll see Boolean is false as output here because B is equal to false so whilst this is a very basic extension it is extremely helpful and saves you a lot of time especially when you're coming across a lot of compilation errors so the next extension on our list is called prettier what this is is an automatic code formatter so when you guys are writing your code you want to make sure that you format it and structure it correctly good formatting is beneficial for multiple reasons including optimizing the readability of your code so when you're working on a project with multiple other people you want to make sure that they can read and comprehend the code that you've written without any issues this extension is fantastic for doing exactly that it takes all the formatting worry away and just automatically does it itself so what I'm going to do is drag in this test JavaScript file here and you can see I've got these three functions now while these functions are empty they're formatted terribly so what we're going to do we're going to head over to our extensions panel here and we're going to type in prettier it's going to be the first one that pops up so we're going to install that there and then what we're going to do is we're going to head down to our settings here what we're going to do is type in format on Save and we're going to make sure that that is ticked this is going to ensure that every time we save a file inside of our vs code it's automatically going to be formatted now the next thing we're going to do is we're going to open up our Command pet and we're going to type in preferences open user settings now what we're going to do is we're going to go back into our extension tab here and we're just going to copy this snippet of code into our settings. Json file so just highlight that copy it and then over here in our settings. Json file we're going to add a comma at the end here of our format on Save then we're going to paste in the code snippet that we copied from our extension and then make sure that you save the settings file now we're going to go back into our test Javascript file here we're going to go file and then save and then straight away you're going to notice that our code is formatted beautifully into this nice nested structure so that is the beauty of this extension it worries about all the formatting and structuring of your code for you leaving you guys more time to focus on the project that you're working on okay so the last extension on our list is called vibrancy so much like our icons extension this is very much decorative it doesn't really have any other purpose besides making sure that your vs code looks immaculate so in your extension search bar type in vibrancy and then it's going to be the second one that pops up now let's have a look here in the description of the extension now when you install this extension you're going to receive an error code in the bottom right hand side of your vs code that says your code installation appears to be corrupt please reinstall now the developer of this extension has acknowledged this error they've told us that the warning is safe to disregard and all changes can be reverted now if you click on the Cog wheel and select don't show again you'll never see that error message pop up when you start up your vs code now one of the most important things that you guys need to do before you install this extension is make sure that your theme is set to dark plus so whatever theme that you guys have right now in your vs code make sure that you revert it back to the default theme which is dark plus so after you guys have reverted the theme back to dark plus it is safe to install our theme so what we're going to do is click the install button on vibrancy continued and then we're going to open our Command pallet and type in reload vibrancy after you've selected that we'll get a notification in the bottom right hand corner here that says vibrancy enabled restart to take effect so what we're going to do is click that there and it's just going to close our vs code for us and restart it accordingly now when it pops up we've got this nice glass morphism kind of design here and you'll also see here in the bottom right hand corner we received that warning that we were talking about earlier all we're going to do is click that settings button and then click don't show again so there's nothing to worry about as the developer said in their description the only reason that it's popping up is that it's editing the vs codes built-in CSS so as you can see we've got that nice glass look that we were after and we can use this with any other theme that we've also installed in our vs code so I'm going to go back and I'm going to change my theme to pale Knight which was what I was running before in my vs code so you'll see that I can actually use the vibrancy continued theme and my pale Knight theme at the same time so you guys don't have to say goodbye to whatever theme that you were using originally so what I'm going to do to Showcase how nice this extension makes your vs code look is I'm going to change the background on my desktop to something a little bit more vibrant so I've chosen this really nice vibrant wallpaper and you can see all the colors are coming through the back of our vs code now so that is really nice it gives that nice transparent look that glass morphism kind of design and like I said before this is purely decorative so it doesn't really add any benefit to your vs code besides making it look pretty but I just like it so I highly recommend that you guys add this extension it looks really nice all right guys that brings us to the end of the video I hope this helped you guys out a lot these are the vs code extensions that I've been using in my day-to-day Life as a computer science student there are plenty more extensions that I could list in this video but for me these are the ones that I use the most if you guys want to suggest any that I haven't put in the video please make sure to comment them down below and while you're at it you might as well smash that like button and please subscribe to the channel it helps out a lot I hope you guys are having an amazing 2024 so far and I can't wait to see you in the next video

Channel: Devression

Views: 280,476

Keywords: vs code tutorial for beginners, vs code installation, vs code tutorial, vs code extension, vs code setup, vs code python, vs code theme, vs code vs visual studio, vs code tips, vs code extension for web developer, vs code extensions 2024, top vs code extensions, best vs code extensions, top vscode extensions, best vscode extensions, visual studio code setup, vscode productivity, vscode tips and tricks, vscode extensions, vscode tutorial, write better code, devression

Id: 1UyQaR8pvjk

Length: 27min 13sec (1633 seconds)

Published: Wed Feb 14 2024