VSCode Tutorial For Beginners - Getting Started With VSCode

[Music] hello everybody and welcome to this visual studio code full tutorial for beginners in this video i'm going to be aiming to show you all of the important functionality in vs code that you need to know to get up and running as fast as possible and be as efficient as you possibly can this tutorial is designed for people that have never seen vs code before however if you have seen vs code and you don't know all of the functionality in it this is probably useful to watch and if you're looking for any specific features or functionality look in the description i will have some time stamps that state all of the stuff that i will be covering in this video so with that said let's dive in after a quick word from our sponsor before we get started i need to thank the sponsor of this video which is alco expert oligoexpert is the best platform to use when preparing for your software engineering coding interviews as the highest quality coding interview practice questions with over 115 practice questions detailed solutions in nine of the most popular programming languages a feature-packed browser-based coding environment extensive test suites and conceptual overviews and code walkthroughs for each and every problem algo expert is the best resource to use to ace your coding interviews algo expert also has a data structures crash course coding interview assessments and a brand new mock interviews feature i can highly recommend algo expert as a former customer myself and now an official instructor on the platform get started using algo expert today by hitting the link in the description and using the code tech with tim for a discount on the platform so before we actually go through the visual studio code application i wanted to quickly give you an introduction to what it is so vs code or visual studio code oftentimes people will refer to it as bs code is a free open source lightweight code editor that works for almost every programming language now vs code is the most popular code editor at least in 2021 when i'm filming this video and is maintained and developed by microsoft now the reason that people like it so much is because it's extremely versatile it's extensible so you can actually make your own extensions for vs code and you can really make your vs code environment specific to your development needs so with that said let's get into the vs code environment i'll actually open the application if you have not yet downloaded it i will leave a link in the description so you can download and set up vs code so i'm now here inside of visual studio code when you first open vs code you may see a screen that looks something like this it should most likely open this welcome screen you don't have to have this welcome screen open you can close it by pressing this button but this just provides some shortcuts for example to open a folder clone a repository create a new file or review some of your recent projects so i'm going to start by closing this and i will show you the first important aspect of vs code which is this explorer tab so you can see that there are some tabs right here these are very frequently used tabs you're probably going to use all of these when you're actually developing or writing code in bs code and this explorer tab is kind of like your windows or file explorer this explorer tab allows you to view all of the files that are in your project to create new files to create new directories to modify or manage files move them around and do everything that you would probably be able to do in a regular windows explorer like this or in your finder if you're on mac or whatever the explorer is for ubuntu so with that said let's get started by creating a new vs code project i will also show you how to open an existing project so to do this we are going to go to file and we're going to press open folder now you'll notice that there is something called a workspace here so in bs code we have kind of two distinguishing things that you can open a folder or a workspace now a workspace is just a folder that has bs code settings that are specific to that workspace so for example it may have some test scripts that are set up such that there's shortcuts to run them it may have a different font it may have a different size for the editor you can customize settings for a workspace you also have settings that are global and i will show you the global settings in a few minutes anyways for us we don't need to worry about a workspace in fact almost all of the time you're not going to use a workspace you can press open folder so here in open folder if you have a folder that you would like to open so you have some project you can just open that folder or you can create a new folder and then that will kind of create a new project so here i'll make a new folder i'll call this vs code quick start and i'll spell start correctly and then we will open this folder and that will be our new project so now when i open this folder bs code will refresh and we can see that this folder is now open in our editor or in our explorer sort so from here we can start by creating some new files or some new folders so let's actually make a folder i'll make a folder here and just call this test and then inside of this folder i'll create a few files i'll say test dot py that's a python script and then i will say test.html that of course is an html script notice we get some fancy icons popping up here before the file telling us that vs code does actually know what these files are and it recognizes the file extensions now if you are not seeing these icons don't worry i will show you how to make them appear in one minute so that is the basics of opening projects opening files and folders from here you can right click on files and do anything that you normally would be able to do you can copy them you can paste them you can move them around for example if i want to move this file outside of this test folder i can just drag it out and now it will ask me if i want to move this i say yes and now you can see this outside of this interior directory now right above this tab here where it says vs code quick start you can see i have my open editors tab and this will just show you all of the files that you currently have open so like in most ides you can have multiple files open here notice that when i double click on them they will stay open in the editor here and i can drag them around and move them as i please everything in vs code is very intuitive and you can resize everything as you would intuitively think to be able to do so now that we understand the file explorer how to open projects and how to create a new project i will show you the vs code terminal which in my opinion is one of the most useful and just nice to have features in vs code so to open the vs code terminal you can type the following command control and then backtick now backtick is on the same key as the tilde which is kind of that squiggly line that no one knows what it's called it is to the left of the one key and below the escape key but there's also an easier way to open up the terminal you can simply drag from the bottom of your screen and move it up now this terminal is just like any default terminal that you would use so if you're on windows this is going to be powershell or your standard command prompt if you're on mac or on linux this will probably be your bash or whatever the default terminal is for your system and inside of here you can type any commands that you would normally type now by default this terminal will start in the directory of the project that you opened if you're using a specific python interpreter like i am right here it will automatically activate that interpreter for you you don't have to worry about this if you're not someone who works in python or understands anaconda this is just something that by default will happen when you have your python interpreter set up in a specific way now the nice thing about this is that you can create multiple terminal instances you can kill terminals you can split them so you can view multiple terminals you can also look at things like an sql console a debug console an output window and any problems that may occur so for example if you're working in say a java file or a typescript file and there was some typing issues all of those would pop up right here you would be able to press on those problems and then it would bring you to where those problems actually existed in your project anyways let's focus on the terminal the first thing i'm going to do here is show you this window right here so this window where it says conda will allow you to actually view and configure all of the terminals you currently have open so i'm going to create a new terminal by pressing this plus button and notice that it now shows you i'm in the powershell terminal so i'm going to go back to my conda terminal and i'm going to kill this terminal by pressing this trash button right here now it will bring me to my only active terminal which is powershell inside of here of course i could type any command that i want so i could cd into something i could ls i could clear so cls and any other thing that you would normally do you can do in the terminal now i will create another terminal here so i have now two powershell terminals one of them is senkana you don't have to worry about that and if i want to view both of these terminals at the same time i can now split this terminal so when i split this terminal notice that i have conda hyphen conda so i now have this terminal but two times so i could type two separate things and view them i believe i could split this again and now i would have three terminals and now i can close this close another one and close that one by pressing the trash icon anyways what i'll do now is just close this so i can drag this downwards i will now show you the extensions pane the debug pane the github pane and the search pane now first of all whenever i work in bs code i like to work in full screen mode so to get into full screen mode and visual studio code you can press f11 now if you're on mac i believe this is going to be function f11 it may be a different key but on windows at least if you press f11 this will toggle full screen so anyways i'm going to stay out of full screen mode just so we have access to all of the file menus up here and i'm now going to show you the extensions pane so when i press on extensions or i press ctrl shift and then x it will show me all of the extensions i have installed and recommended extensions for my development environment so vs code is great because by default it comes very bare bones there's pretty much nothing installed by default whenever you start working in different languages or using specific frameworks or scripts you're usually going to be prompted to install an extension for those for example you can see here i have 23 installed extensions and extensions are just extra functionality for whatever it is that you're doing so if i scroll down you can see i have the python extension notice this has 31 million downloads that is the one i worked on when i was at microsoft i also have this remote wsl extension and a bunch of other ones as well so extensions are super simple to manage you can just press uninstalled extensions to disable them to uninstall them to install them and to search for an extension you can just search for it in here so for example one of the extensions i usually recommend people install is called prettier now prettier is a code formatter and i will show you how it works shortly you don't have to install this but it is just an example of an extension you may want to install now if you were working in java are you working in python or javascript or typescript you would install those extensions and then you get support for those languages so that is why vs code is loved by many because it doesn't come with all this stuff you don't need you just install what it is that you do need so anyways that is the extensions tab again go here whenever you're looking for some specific functionality there's a lot of useful extensions if you would like a video on my top extensions then leave a like and a comment in the comment section down below and then i will potentially make a video on that anyways now that we have looked at this extensions tab i want to show you this search tab so one of the most common things you're going to be doing when you're writing code is you're going to be searching for variable definitions you're going to be trying to find and replace things and well being able to search for specific lines or search for specific text is very useful so let me now open up a bit of a larger project that already exists and i will show you how we can use this search functionality so i've opened a web development project that i actually did for an entire youtube tutorial series this was the full stack web application with react and django and inside of here you can see i have a ton of different files i have some python ones i have some javascript ones whatever i have a bunch of different things so firstly i'll show you how you can actually zoom in and zoom out of vs code because notice my text is quite large and you probably don't want it this large when you're actually writing code and not making youtube tutorials so to do this you can press ctrl then minus and plus on your keyboard as you normally would and this will shrink and zoom in and resize this vs code window now i just want you to note that this is zooming so we are simply scaling the vs code window we are not actually changing the size of the font here which i will show you how to do in a minute when we get to the settings section anyways i wanted to show you the search tab so let's zoom in one more time and here what we can do is just search for text so if i wanted to search for say room join which is some text that exists in my program you can see it will show me all of the files that have the text room join all i have to do is press on these and it will bring me to where that text is defined now if i want to replace some specific text what i can do is type the text that i want to replace so i could just say room join and then maybe i want to replace that with join and it will show me what this replacement will actually be and i can now press this button right here to replace all there's a few more settings here like match case match whole word and regular expression but i won't get into those in this video so that is the search tab there is not much more to talk about with that and now i'm just going to show you a few kind of editing tricks or a few things that you can do in the editor itself so one of the most common things or one of the most useful things that you can actually do in vs code is you can find the definition of variables or of classes so for example i have i'm trying to find some variable here that this is going to be good for i have this variable here called room code so if i highlight this first of all you can see it's highlighting all of the other room codes but what i could do here is right click on this and click go to definition go to type definition go to implementations go to references peak and a ton of other useful things so i won't really show you all of these because there's a lot of different ways to look at this but i just wanted you to be aware that you can do things like this and specifically if you're working in a typed language it's very useful to look at say all of the references of a variable or look at where it was defined now this isn't going to work very well in javascript but if you're working in typescript or java or c plus or something this would be a lot more useful anyways if you want to do some basic stuff like you want to find text in a file so you don't want to use the search tab here because this finds it in all of the files in your directory in your project you can press ctrl f it will bring up this right here which will allow you to just search for things in this file so of course you can press enter and it will bring you down to the different matches that it finds now if you want to actually replace text you can press ctrl h now this will open up this replace tab right here you can also just press this little arrow and now you can find and replace you can replace one at a time or you can replace all of the matches all right so that is finding and replacing now i will show you a few other interesting tricks that are very useful for example you can see we have all these windows open here sometimes you'll notice when i open a file so let's actually just open info.js you see that this file is italicized when the name of the file is italicized that means that this is going to close when you open another file so if i open homepage.js notice that my info.js is going to close if you want this to stay open you can double click on it notice it will not go italicized now and then it will stay open it also will stay open if you make any changes to the file itself anyways once we have all of these files a lot of times you want to view files side by side or up and down vertically to do that you can right click on the file and you can split this up down left or right so if i split left now i can see multiple files and i can resize the windows just by moving them around like this i can also split again so i can split this up and now you can see we have all of these files open and you can play around with that yourself uh pretty straightforward and easy to figure out how that works i also can just drag this file around to wherever i want so i could drag it on here i also could drag it up here and then it will automatically respond to that action all right so now let's quickly go through the settings page of bs code there's not a lot of settings that you need to modify in fact by default you probably don't really need to change anything in bs code but it is useful to know what some of these settings are so when i press on this settings button right here notice we see a few things popping up the command palette the settings menu which you can access from control plus comma extensions keyboard shortcuts user snippets color theme and a bunch of other things so actually let's change the color theme first this is probably the first thing you're going to want to do we'll go color theme and you can see i'm using manaki or however you say that i probably mispronounced that we could change this to say solarize dark let's change this to something else now let's go with light default which i think looks horrible let's change this now back to the one that i liked okay so this is my favorite one by far but everyone has their own preference and then i will show you a very useful thing here so if you press on the settings button and you open the command palette this is something that you're going to use all of the time in vs code so a lot of the extensions that you install will have some commands that come with them now to open the command palette you of course can press settings and then you can open it manually or you can press ctrl shift and p on your keyboard so this opens up the command palette and inside of here you can type a ton of different commands so for example if i type python you can see all of the commands that are prefaced by python now of course i can't really go through all these commands because this depends on the extensions that you're using but if you're looking for a specific command say like copy just type it in the command palette and see if it pops up and chances are you'll find something that you're looking for another useful one is format document so if you have a formatter installed you can press format document with and then you can pick the formatter that you want to use in this case you can see only python is the one that i have so i press python and it will automatically format this document for me all right so that's the basics of the command palette the next thing i'm going to show you is the file explorer so yes there is this explorer here but if you want to search for a file name what you can do is press ctrl p this will now bring up the search file by name window i don't really know the name of this and what you can do is just search for files so i can search for say util.pi it will show up here i can press that to open that file very useful saves you a lot of time now there's a ton of keyboard shortcuts in visual studio code to find them you can go to the settings menu and in fact let's do that so let's now go to settings so control plus comma and this is where we can change all of the settings for vs code so you can see we have our font size this is an important one we can also search for all of our settings up here and there's a ton of other things that we can change so i'll let you guys mess around with this on your own there's not too much for me to go through here but the first thing you're probably going to want to change is font size if you're like me and you like your font to be nice and large all right so that is the settings page in vs code now i will show you the debug window and i will show you the github window so let me actually open up a new project to illustrate this and i will be right back all right so i've opened a new project and now i will show you how to run a file i will show you this github window and then this run and debug window so first of all if you want to run a file this of course depends on the type of file that you're using but for python files for example there is this run button at the top of the screen so if i were to type in some code here let's say print hello and then world then what i can do is save this file control s and then run now when i run notice it's going to open up a terminal and then i will see my output down here so that's as easy as it is to run your code but again this depends on the type of file that you're using and this is going to be different depending on what stack you have anyways what i will show you now is this github window so for this github window what i need to do is initialize a github repository but if i was already in a github repository then you would see what we're about to see so what i'm going to do is initialize a repository all this is really going to do for us is run the command git init that creates a new github repository and now notice inside of this we have our source control window which is showing me all the changes that i've made i can add these changes to the staging area by pressing this plus button and i can also remove them from the staging area by pressing the minus button i also can revert all of the changes sorry that's open file but here i believe i can revert all of the changes by pressing discard changes and then once i have the files in the staging area that i want to make a commit for i can type in my commit message so say something like first commit and then i can press the check mark which will actually commit all of these changes so now you can see little two goes away saying that hey we have no files in the staging area now from here i can do a bunch of other things i can toggle the view mode which allows me to actually see all of the changes that i've made to my files in my code editor i also can refresh my github repository i can press these three dots to do things like pull push change branches and all the other standard github commands you would normally want to use there is a nice interface for github in bs code all right so now we understand github and of course there's a lot more to go through but i won't cover it all here let's talk about this run and debug window so this run and debug window allows you to run and debug files so notice that when i'm on an html file here it's not really giving me any meaningful output because i can't really run and debug my html file but for my python file here i can press run and debug and then it will ask me how i want to debug this so you can choose your method i'm just going to go with python file and then it will bring up this little debugger window and it will run the code now i didn't place any breakpoints so we didn't really get any meaningful debug output and i'm not going to be going through debugging in depth i have an entire video on how to debug but the basics are you can press breakpoints by going in the gutter here so this is called the gutter and if i highlight over this it should say place breakpoint anyways you can see these little red dots are different break points in your program and then at the bottom here you can see that we have this breakpoint window which is showing us where the break points are anyways if i run and debug my file with a breakpoint so let's go ahead and do that as soon as i hit that breakpoint my program is going to stop i can see all of the variables on the left-hand side of my screen i can type in expressions to watch from right here i also can play i can step forward i can step into and i can step out of i can also restart stop and of course play and pause so that is kind of the basics of the debug window again i don't want to go into depth in any of this stuff just showing you what exists there's a few other windows here for example remote explorer and sql tools i'm not going to talk about those in this video and in fact i think that covered pretty much everything that i wanted to show you so last thing that i will mention is that there is a ton more stuff in bs code for example you can modify the appearance going in full screen mode going in something called zen mode which removes all of the gutters and all of the side menus i believe to get out of this uh you just press f11 it removes you from full screen mode there's a few other interesting things like your editor layout which you can change and yeah just a ton of stuff in vs code it's super useful super versatile and also keep in mind there's this little kind of bottom menu here that shows you some useful information so anyways that is all i wanted to cover i hope that this video was helpful to you if it was make sure you leave a like subscribe to the channel and i will see you in another youtube video

Channel: Tech With Tim

Views: 96,365

Rating: 4.9439878 out of 5

Keywords: tech with tim, visual studio code, visual studio code editor tips and tricks, visual studio code extensions, zen mode in visual studio code, microsoft visual studio code, what is vscode used for, visual studio code linux, visual studio javascript, visual studio code python, visual studio code ssh, vscode tutorial, visual studio code tutorial, vscode guide, vscode tips, vscode quick start, visual studio code tutorial for beginners, visual studio code guide

Id: ORrELERGIHs

Length: 22min 56sec (1376 seconds)

Published: Sat Feb 13 2021