Basics of Visual Studio Code in 8 Minutes! (2023)

hey how's it going everybody in this short video I want to walk you through the basics of using vs code in this video we will only look at the essentials that will help you start your first project in vs code and by the way if you're having any trouble installing vs code I'm going to be leaving a link down in the description right below the like button to another video that I made explaining how to install all this before we run any code the first thing we need to know is how we can create a new file or open a file that we have already created in the past one way that we could begin is to click on new file open file or open folder within the welcome screen that we're greeted with if this welcome screen is not showing for you then that's not a problem you can simply click on file and then you'll have the same options over here on the left hand side let's start things off by clicking on file subsequently we're going to go on open folder and I'm going to choose a folder that I prepared earlier which is in the vs code projects folder and it's this one called vs code tutorial and I'm going to click on select folder after I've done that you can see that this folder is now open in vs code and if I go ahead and click on the text document within the folder you can see it's a very simple text document telling you to subscribe to create a completely new file we can click on file new file then give the file a name such as test dot Pi which is short for Python and then click on enter which creates a new file then we'll be asked if we want to create a new file we can select create file and you can see on the left hand side we have this test.pi file created if I want to go ahead and change the name of the file or change the type of a file I can simply right click on it so I'm going to right click on the text document and I'm going to rename it and simply write the new name which is going to be test again and then instead of a txt file we're going to make it a JS which is short for JavaScript file I do want to point out that you can rearrange these two windows As You Wish if I go ahead and click on one window and drag it around you can see that I get this white outline which tells me how the the window would look so if I go ahead and drag to the right hand side you can see these windows are now next to one another and if I go ahead and drag to the bottom you can see that the windows are now stacked on top of each other the next thing that I want to show you is how we can execute code within vs code So within this text.pi file we can write some python code such as print and then in parentheses hello you will now notice that there is a small white dot that appears in the top right corner of your tab and that simply means that there are unsafe changes if you want to save the changes that you made to the file simply hit Ctrl and S and you'll see the white dot disappear if you've used any other code editors in the past such as pycharm you will probably now try and look for a green play button to run this code but you'll notice there isn't one and that is because we first need to install the appropriate extensions that allow us to run code so I'm going to navigate to these four small squares and click on it because this is where we can install our extensions once the extension sidebar opens you will see that there are installed extensions and this should still be empty for you if you've just installed vs code and in addition to that there's going to be recommended extensions that you can install in any case we want to run some code so we are going to look for the extension called code Runner now you'll see that the very first extension that pops up under this name is called code Runner and it has 19 million installs and it is an extension that allows us to run all sorts of different languages within our editor so let's simply go ahead and press install and then after a couple of moments you'll see that this extension has been installed and you'll also notice that in the moment that it's installed this small play button in the top right corner appears that allows us to run code now that the extension has been installed let's exit the window and let's click on extensions over here in the sidebar to minimize the sidebar so here again you can see the one line of code that we wrote earlier print hello and now if I go ahead and press on the play button you'll see that the code executes and a small window opens up in the bottom telling us that the code has run and clearly you can see that this code has executed because we're getting the word hello being printed in the terminal but how about other coding languages we clearly see that python works but how about JavaScript for example so let's go to our test.js file and within this test.js file I'm going to write console.log and within parentheses hello so we're expecting a print of the word hello in the terminal again and now if I go ahead and save this and click on the play button on the right hand side you'll see that this code has also executed because it says hello in the terminal so this works perfectly fine as well but we're not quite done so setting up everything yet because there's going to be a couple of web developers out there asking how they can run something like HTML in the browser using vs code to demonstrate how to do that I'm going to right click within my folder and click new file and create a test dot HTML file and within this file I'm simply going to paste a couple of lines of HTML it's random code just so that we have something to execute and once again in the top corner of the window you can see this white dot because we have unsaved changes so I'm going to click on control and S to save the changes the next thing we need to do is we need to navigate back into the extensions Tab and within the extensions tab I'm going to search for an extension called live server and the first one that pops up over here is exactly the one we need you can see it has 33 million downloads so this is not some Niche extension this is probably one of the most popular ones out there so let's go ahead and hit install and you'll see that it takes just a couple of moments for this extension to install so now we can close this window and we can close the sidebar of the extensions and you'll see that we are back within our HTML file to run this HTML file we can now right click within this file and after that we can simply go and press on open with live server and once we do that you will notice that a couple of moments later a browser window pops up with the code that we have written earlier so now regardless of what type of development you're doing you're pretty much all set to go but there's two last things that I want to show you that help me a lot the first one is how I can zoom into the code using control and the mouse wheel and the second one is how you can change your theme so starting with the first if I press control and move my mouse wheel up you can see the code Zooms in and if I press Ctrl and move the mouse wheel down you you can see that the code zooms back out again to set that up you simply go on file then you go on to preferences and subsequently you go to settings and then you have the search bar within the search bar you can simply write Zoom and the first option that comes out tells you that you can have Mouse wheel Zoom you want to make sure that this option is checked and if it is then you'll have the same functionality that I have within the editor allowing to zoom in and out with the mouse wheel now the second thing that I wanted to mention is how you can change your color theme in vs code to do that you simply go on file then you click on preferences and then you'll see a button that says theme then you click on color theme and there you have all the individual themes that are currently to your disposal separated between light themes and dark themes if you want to browse additional themes and install other ones you can click on browse additional color themes but if you simply want to switch to another theme such as this one for example can be dark then you simply press on it and you have a different theme so you can play around with that to choose the color theme that you prefer alright we're going to leave it here for this video and by the way I want to mention that I have set up an entirely new website I'm going to leave it pinned as the first comment down in the comments below the website features all of my courses that you find on my YouTube channel with additional write up code and notes that you might find helpful as always I hope this video helped if it did then make sure to leave a like And subscribe to this Channel and we'll see each other in the next video

Channel: Max on Tech

Views: 7,738

Keywords: VSCode, Basics of VSCode, Visual Studio Code

Id: phzQMwFXMEo

Length: 8min 44sec (524 seconds)

Published: Fri Apr 28 2023