Visual Studio Code (Windows) - Setting up a Python Development Environment and Complete Overview

hey there how's it going everybody in this video we're gonna be learning how to install Visual Studio code and set up a Python development environment we're also going to go over the different features of this editor and see why it's so nice for Python development so we'll cover how to easily switch between editors how to debug applications how git integration works look at unit testing capabilities and a few other things so I've had a ton of comments and requests to cover vs code and it just seems like so many people are switching over to it I don't know how many of you all listen to talk Python podcasts with Michael Kennedy but at the end of every show he always asks us guess what editor or IDE they prefer to use and it used to be pretty mixed but now I just feel like I hear vs code so often on there that I figured I had to take some time out to try this and I've got to say so far I'm really impressed with this editor now I wouldn't doubt if you all see me using this from here on out in my videos so with that said let's go ahead and get started and see how to set this up and I'll show you what I like so much about this now I ran into some differences between how this works on Windows and Mac so I decided to just make one video specifically for Windows and one specifically for Mac so this video will be covering how to use vs code on Windows but if you're using a Mac then I'll be sure to leave a link to that video in a description section below so first of all let's go ahead and install Visual Studio code so I've got their website pulled open here in my browser and that is at code Visual Studio com now Visual Studio code is different from Visual Studio which is a full on IDE vs code is a lighter-weight editor that can be extended with plugins for whatever we need so be sure to search for Visual Studio code and not just Visual Studio I'll also have a link to this page in the description section below now vs code is free so we don't need to buy anything we just need to download it and install it so I'm just going to download it from the website here so I'll click on download and then it choose your operating system I'm on a Windows here and now this should download automatically ok so once that is downloaded I'm just going to run that executable and this is just like any other software installation wizard we'll have to accept some terms here pick our install location I'll go ahead and create a desktop icon for this as well and let's just continue on and finally I will install and once that's installed then I will open up visual studio code okay so now that that's finished I'm just going to check this here that says launch Visual Studio code and finish that and now it should launch vs code for the first time here so this might take a sec to pop up okay so when we first run vs code it's going to open they're getting started page in the browser and also it's going to show us their welcome screen here with in vs code now there's a lot of good information on both of these pages but we'll go over a lot of this in the video so I'm just going to close these down here for now so I'm going to close the browser and I'm also going to close this welcome page here and now let me make this larger here so that we can see the editor and I'm also going to zoom in so that we can see the menus and the text a little bit easier here okay so we can see right off the bat that we have a very simple design which is definitely nice once you get used to it because you don't have a lot of other stuff getting in your way but when you're new it might be hard for you to remember your way around because we're mostly dealing with icons and not descriptions so this bar over here on the left is called our activity bar and this is our main navigation for the editor and if you hover over any one of these icons then after a second or two it'll pop up with a description so we can see here that this top one here is the Explorer and if we click on that then this is where we can open our directories and files we don't have anything open right now but we have the option to open a project folder and we'll do that here in just a second so the second option here this is for search so this is where we can do our finds and replace and we can do these within multiple files and the third icon here is the git integration which is the source control and we're gonna take a look at this in a bit and see how to push some code up to github but I'm not going to look at this quite yet but we will take a look at this here in just a bit now the next icon here is the debugging icon now this is a very nice feature in vs code and it's a feature that a lot of other don't have right out-of-the-box now I found the debugging pretty intuitive and easy and we'll take a look at this here in a bit as well when we debug some code some Python code okay so the last icon down here at the bottom is one that we're going to be using right now and this is for managing extensions so whenever we click on this let me make this a little wider and it should show us some icons here ok so right off the bat it shows us some recommended extensions here at the top and then it shows us some popular extensions right below this now you might not have these recommended extensions if you do then they might not be the same ones so for example this is recommending as your repos to me and it tells me that this is recommended because I have git installed now I'm not sure why usually it recommends sublime key mapping let me search for that extension if I search for sublime and click on this then this is a sublime text key map and settings which will import sublime text settings and key bindings into vs code usually it recommends that to me whenever I since I already have sublime text installed but if you're using another editor then it might recommend those key map and setting imports for you within the extensions here but I'm just going to close that for now and now we're going to look at the popular extensions here so the extension that we're really after right now is this Python extension and this is the most popular extension on vs code by far so if I sort the extensions by popularity so right now if we go to show popular extensions then it's already sorted by install count but we can also sort by rating a name if we wanted to as well so we can see here at the top we have Python and this has 40 2.2 million downloads so far and the one in second place only doesn't even have half of that so this is definitely the most popular extension at the moment and we can see in this description here of this extension that this extension adds support for linting and debugging formatting our code unit testing and intellisense and intellisense is what shows us what attributes and methods we use while we're typing and give us information about those and we'll see more about intellisense in just a bit as well so I'm going to install this extension because this is what's going to allow us to work with Python and code and this might take a second to install because it's a larger extension but we can see that it just now finished up ok so now I'm going to open some existing Python code that I have in a folder on my desktop now if you don't have any existing Python code to work with then you can simply create a project folder yourself and add an a script with a dot py extension and be sure that you include that dot py extension so that vs code knows that it's Python and gives you some nice syntax highlighting but I've already got a script available so I'm going to open this up so I'm going to go to open folder and then this is on my desktop so I'm going to go to desktop here and just open up my project and now it's going to open those open that up in a new window now I'm going to close down the welcome page again and actually down here at the bottom I'm going to select deselect to show the welcome page on startup and now I'm going to open up my python script okay so we get a few pop-ups down here this one says that we can change our Python interpreter and this one says that we don't have a linter installed now I'm probably going to get these pop-ups a good bit but I'm just going to ignore them for now and we will take a further look at these whenever we actually do linting but for now I'm gonna have to keep just exiting those out ok so I have a simple python script open here now first I'm importing sis let me make this a bit larger again once we change some settings here in a bit then it will give us a better screen size here with our editor so first within my python script i'm importing sis and i'm printing out sista and sis not executable so this will let me know what version of python i'm using and where it's located on my computer then I'm just then I just have a simple function here that creates a greeting and then I'm printing out a couple of greetings here at the bottom I just wanted some sample code so we could see some of this syntax coloring here okay so first let me see how we can run this Python code so by default our Python extension is going to use the first Python interpreter that it finds on our system path now if you don't have Python 3 installed then this might use Python 2 if you have Python 2 installed if so then I can show how to change these in just a bit so first let's just try to run this so to do this we can right click anywhere within our module and then we can come down here to the bottom and we can see that we can run current test run Python file in terminal I'm going to select run Python file in terminal and now this will bring up our terminal here and it will run our python code now we're going to look at how to use a keyboard shortcut to run code in just a bit so if you don't like right like right clicking to run your code then don't worry we'll see how to make it more simple in just a bit but for now if we look at my output down here then we can see that I'm using Python 3 7 that are printed out right there and then it prints out the location where that is here on my machine and also it printed out those greetings ok so what if we wanted to change our Python interpreter so there are a couple of different ways that we can do this so if we look at the blue bar at the bottom of the page then in the bottom left it shows us which Python interpreter we're currently using so if we click on this then we can change our Python interpreter so if I wanted to use Python 2 then I have that installed here in Python 2 7 directory with this Python executable so if I click on that and now I right click and go to run Python file in terminal then now we can see that it's running Python 2 7 and that this is the location of the Python interpreter and then it also prints out those greetings so let me go ahead and clear out my terminal here now if you ever want to clear your screen and you have the CMD running then I think you can just type in CLS yes so that works ok so now I'm going to change this back to Python 3 7 we can see I also have Python 3 6 install here and it's going to find in of those anything that's located in a regular Python path then it's going to find those so I'm gonna switch back to Python three seven here so let me make this a little smaller here so that we can see now if you don't have Python 3 installed then I definitely recommend using that if you'd like to see how to install that on both Windows and Mac then I do have a separate video where I show how to do that for both operating systems so I'll put a link to that video in the description section below if anyone needs to see how to install that so I show you I also show you in that video how to get it in your path and everything so once it's in your path then the S code should automatically pick that up and allow you to use that now when I changed my interpreter you may or may not have noticed that vs code created a folder inside of my project directory here called dot vs code and that directory has a Settings dot JSON file so these are settings for our specific current workspace so let me open this up and we can see that it set our Python a path within the settings JSON file but what if we wanted to use a certain Python interpreter by default for every project because right now this is just this specific projects settings so to do that we're going to need to set it in our global user settings and while we're talking about our user settings let's also make some changes to other global settings as well so let's look at how to change our color theme our file icons and things like that so that we can personalize our editor a bit so first let's change our color themes there are several built-in ones that we can use and to change your color theme then we can just open up our command palette now this is the first time that we've opened our command palette but it is extremely useful it basically allows us to access every command and everything that we can do within vs code so to open the command palette we can do that with ctrl shift P so once we open this up then we can basically type in anything we want to do and it will likely show us how to do that so if I want to change color themes and Alki type in color here and I can just change my color theme press preferences by clicking this right here so whenever I click on this if we scroll up and down in this list then we can see that it gives us a live preview of exactly what this looks like now they have some nice built-in themes here but I'm actually going to install additional color themes and that's the last option down here at the bottom so I'm going to click on that now if anyone has watched my videos before then you know that I usually use sublime text and the color theme that I use in sublime text is called pre-dawn now somebody has actually put together a pre-dawn 4 vs code as well and I'm glad that they did because I like that color theme so that's what I'm going to use and it's this one here pre-dawn theme kit this pre-dawn Twilight I'm not sure what that is but this is the one that looks like the sublime text version so I'm going to install that and then click on that to use pre-dawn now if I go back to my script then we can see for those of you have seen my videos before this likely looks more how I usually have it set up and there are plenty other popular color themes out there so definitely look around and see what you like because you know as programmers we are using our editors a lot so you should definitely have something that is pleasant to your specific tastes now we can also change how our file icons look over here in the sidebar so to do that we can see that this looks pretty good right now it gives us a Python icon for the Python files and these brackets for a JSON file but if we wanted to update this then we can open our command palette and now I'm going to type in file icon and then we can change our file icon theme so if I click on that then by default we only have a couple in here but again we can install additional file icon at themes and here if we want to sort by popularity then again we can just click on these extra dropdowns here and then go down to sort by install count and it looks like it probably was already sorted by and saw count so the one that I personally like is this one here called a why you so I'm going to click on that and I'm going to install that and once that installs it might actually override your color theme here I'm gonna select predawn again down there at the bottom but now if we go back to our editor and let me open up the command palette again and press file icon theme then we can select a weiu since that was installed and when I select that we can see that now these changed icons over here and I like this one because it gives a nice indicator of closed and open folders here on within your file explorer over here okay so I think those setting changes look pretty good for both our color theme and for our file icons so right now we're actually implicitly changing our global user settings by changing our color themes and all of that but there are a ton of other settings that we can change that we haven't seen yet so if we want to see all of the settings that we can change then we can open our settings by going to the bottom left of our activity bar and clicking on this gear icon here so if I click on that then we can see that we have some other options here as well we can open our command palette from there we can look at our settings our extentions keyboard shortcuts all of that I am going to open up these settings for now okay so they used to have this set up to where it opened up the default settings and your user settings side by side in JSON format and I kind of liked that a bit better but now we have it to where it opens up this UI version of our settings instead so you can come in here and change your settings using this unit user interface but honestly I hardly ever use it like this I am coming from sublime text so I'm much more used to the JSON settings and I believe that it gives you a better overview of the settings that you're changing now we can switch to the JSON version of our settings just by clicking on these brackets up here and when we hover over that it says open settings in JSON so I'm going to click on that and now these are our settings in JSON format so we can see that I've you have zoomed in to our editor so we have a zoom level of 3 and anytime we hover over a setting we can see that it gives us a description of what that setting does as well so that is a nice feature now since these are our users settings this is only going to show us what these settings that we have changed from the default so I have changed the zoom level this startup editor is because I said that I don't want to see the welcome screen when I log in we have the color theme here and the icon theme here as well now I have some other preferred settings that I'll show in just a bit now I do wish that they showed the default settings by default when we open up our settings as well because I feel like someone who's new to v/s code might not know what settings they can and can't change so it'd be nice to see those default settings so I'm gonna change my settings so that it does show my user settings and default settings now I usually have this set up to where it shows them side by side but since I'm so sumed in here side by side isn't really going to look good in this video so I'm just gonna leave that part out for now so to do this I'm going to open my command palette and now I'm going to type in default settings and my type in default settings we can see here it says open default settings so I'm going to open those and these default settings here these are all of the settings that we can change within vs code so we can see that there are ton here and the comments here show us an exact or show us a snippet of what change the changing these settings would actually do now like I said I'm going to change a couple of settings here that open up my settings in JSON since I prefer that to the UI version and also I'm going to have it open up my default settings when I open up my user settings so to do this you don't really have to know what I am doing here but I'm just going to do a search and you could find these on your own but I've already written them down here so this is within workbench settings and we can see here that we have a few settings here so we have workbench settings editor it's currently set to UI by default I'm going to copy that and go into my user settings and instead I'm gonna change this to JSON now if we don't know what options we can use with this setting then we can always click on this pencil icon over here and the gutter that says edit when I click on that it gives us the options that we can use so we can either use UI or JSON so that is a nice touch there and it says I have to save and retry in order to save that so I changed that to JSON now I'm also going to let's see come down here a little bit and I want open default settings set the true as well we can see that the comment here says controls whether opening settings also opens an editor showing all the default settings and I like to see my default settings while I'm editing my user settings so I will set that to true and now we have that saved so now if I save that and then I close down all of my settings here if I reopen the settings by doing that the same way going to the activity bar here clicking on this gear icon and clicking on settings then now it opens up my settings and default settings here at the same time and just to get that into one single window I can just drag and drop it over there so now we have our default settings here and we have our user settings here so now anytime you want to see what default settings you can change then you can just come in here and look at all of the comments or if you want to search for something specifically like Python then I can do a ctrl F over here to find and then let's say that I wanted to search for Python settings so I can do Python dot and now this will take me to the Python settings so for example like I was saying before one setting that I want to change is my default Python path so that it runs the exact version of Python that I wanted to run by default any time we start a new project so I could just do that by searching python dot and then I'm gonna try to do Python path so python dot p let's search through here so we can see here that we have Pippy and V path poetry path and here we have Python path so now in order to change this I'm just going to copy this and put it here into my settings and now I want to put the full path to the version of Python that I want to use by default so in order to do this I think the best way to grab this would just be to open my integrated terminal here and you can do that with control tilde and now I'm gonna do a command of where Python and this should show me okay so that didn't work there let me see if the Python command is running there okay so that is so I can do import sis and then do sis dot executable and that will give me the full Python path there now that is the version that I want to use for every default project I want to use this Python 3 7 so I can exit out of there and clear the screen and now I'm just going to paste that here within my settings and we can take those single quotes out that it added in for us because that'll just mess it up ok so now I can save that so now anytime we were working with a Python at file then we shouldn't need to check which Python interpreter we're using because you should know by default which one it's going to be using now while we're in our settings here we can also make some other changes to our editor that you might like now I'm gonna copy and paste a few settings into mind here now you don't have to do this but these are just personal preferences and it'll also make the text and a little in window here a little bit easier for you to see during this video so let me grab these and I'll explain exactly what I changed so these are the settings that I want to change here so I'm going to copy these and just paste them in to my user settings here so if I save that then we can see that the text is way too large because I am currently zoomed in too far here so let me zoom actually I'll keep the zoom the same but I will change the font size here so let me try let's see if ok so I think size 14 font well actually that's a little small let's do let's do 16 font for this video now that might look a lot larger than size 16 font but that is because we are zoomed in to the here so that size 16 font actually looks pretty large the reason we're zoomed in is so that we can see everything else here in the editor like the sidebar and things like that now on your machine you might not need to zoom in the only reason I'm doing that is because I'm recording this video and I want everybody to be able to see now I'm also using a source code Pro here as my font for the editor and for the debug terminal now if you want to use that as well then that's a font that you can download from google fonts and I'll be sure to leave a link to that in the description section below as well so like I said those are just personal preferences the important thing here was setting the default Python interpreter so now the s code should use that version of Python by default unless we change our interpreter specifically for our project now why would we want to change our interpreter specifically for one project well the most common reason is because it's usually a good idea to create a virtual environment for our project so let's see how we'd create a virtual environment and then set that as our interpreter for a specific project so I'll create one for the current project that we currently have open here so to do this I think it's easiest to do this through the integrated terminal so I'm going to open that up and again that is control tilde and whenever you open up a terminal it's automatically going to open up into your current project folder so we can see here that I'm on my desktop in this my project folder so now that we're navigated to our project directory this is where I'm going to create the virtual environment so if you want to create a new virtual environment I think the easiest way to do that is using the V env module from the standard library and if you don't know how to create virtual environments using ve and V then I do have a separate video that goes into more detail about how to do this so I'll be sure to leave a link to that in the description section below as well if anyone is interested but basically we can just say Python whoops let me spell that right Python - M and that will run a module and the module we want to run is ve and V and now we can pass in our arguments to that module and the arguments we want our the virtual environment name and the virtual environment name I'm just going to call ve and V as well so if I run that then it might take a second to create that virtual environment but once that finishes then let me check my project directory up here now and yeah we have a V env directory here so that virtual environment did get created so let me close down my terminal here and now that we have that for our project we just need to change the interpreter like we did before so I can come down here to the bottom left and click here and when I do that we can see that we have a Python 3 7 in called ve and V here and we can see that it gives the location of the current directory within this V env folder so V s code automatically pick that up so I'm going to change to that and like I was saying V s code automatically pick that up and that's because V s code automatically picks up virtual environments within the base of our project how like how we created it here now I can also pick up Khanda environments as well and things like that now if you're using a virtual environment that's located somewhere else on your machine then to do that you can just open up the settings dot JSON file here in your dot vs code directory and we can just put the path to whatever virtual environment you want to use within here but it can audit auto detect a lot of those for us but if you have it you know like on your desktop or something like that or an in virtual environments directory then you can just hard code that path in here to use that for a specific project now when you have a virtual environment activated it will actually activate that environment and all new terminal sessions as well so I think that's a really nice feature so if I open up terminal here let me close down the one I currently have by clicking this trashcan and kill terminal let me open up another one and when I open that we can see that it automatically came in and ran that activate script on that virtual environment so if I clear my screen here we can tell that the virtual environment is active because we have V and V over here in a so if we wanted to install some packages within this virtual environment then we should just be able to do it with our pip command so if I say pip install request to install the request package or the request library then I will let this install and once this is installed then we should be able to just import this into our scripts with no problem so I'm going to close down my terminal there and within my script I'm just going to say import requests and I'll make sure this is working bye whoops oh there we go and I will make sure that this is working by coming down here towards at the bottom of this script and I'm just going to remove these current print statements that I have now and I'm going to replace these with a request so now also as I'm typing here watch how the intellisense works and this is built in the vs code and it's going to show us the attributes and methods that we can use for different objects so if I say R is equal to request dot and whenever I press dot then it will pop up with all of the things that I can do with request so we can see that we can use to get method we can use the post method session all kinds of things like that so if let's say that I want to use git so I'll click on get it will autofill that now if I want to know more information about this I can right click on git and we can see that we have you know go to definition peak definition if I click on it go to definition then this is actually took me to that get method within the request library itself so we can see exactly how that method was written so I think that's a very nice feature now if we don't want to completely open up that file where that method exists then we can click on peak definition and that will just show us a little peak here so we can see the get method here within this little window but when we close that or write back to our file so I think that intellisense is very useful for giving you information like that so let me actually go to my you well here so I'm going to just type in that I want to get the URL for I'm just going to go to my personal website so HTTP colon forward slash forward slash core EMS comm and now I'm going to print out the status code that I get back from that so I'll do an r dot status code and now let me save that and now let me run this code first let me uncomment out the cysts top version there because I don't want a whole lot of output but now I can run this code by right-clicking and selecting run Python file in terminal so I will run that and it's going to open up activate our environment and then print this out so we can see here that the executable that it used this is it right here that is our virtual environment so it is using that virtual environment that we just created and get a 200 response there from the website so that's good okay so now let's take a look at how we can auto format our Python code so right now we don't currently have a formatter installed so now we're going to start taking care of some of these pop-ups that we've been seeing throughout the video so I'm now I'm actually going to listen to one of those pop-ups and use and install a formatter so to format our code we can use a keyboard shortcut I kind of forget what that shortcut is so I'm just going to use my command palette and type in format and we can see here that it is shift alt F so I'm gonna use shift alt F to format my code when I do that it pops up here and it says hey you don't have auto pep eighth installed would you like to install that as your formatter and it also suggests some other popular formatters here too such as black and why a PF now I'm going to use black here but you can use auto pepe if you'd like I actually don't really know the differences between those two but I saw on Kenneth writes his blog that he was using black so I'm gonna give it a shot and see if I notice any differences or not okay so now with that formatter installed then we should be able to format our code just by using that shift alt F keyboard shortcut and now it formatted our code now that might not look a lot different because our code was already pretty well formatted to begin with but let me just really make this look ugly so let's say you had some ugly code written here and then I'll save that now if we want to auto format this code then I can just press shift alt F like we saw before and now if formats our code to split that out nicely now sometimes while we're making changes like this it might only make those changes in our workplace settings and not in our global user settings so I'm gonna open up my project settings here within that dot vs code directory and we can see here that it set our formatter to black now I'm just going to copy that and put that into my actual user settings so that it uses that by default so I'm going to come down here to the actually I'll just go below my Python path and I will paste in that formatter and also while I'm here in my global settings I'm also going to change my settings so that my code formats automatically anytime I save my file so I could search for the settings I need to change but let me show you a nice tip that I use a lot while changing settings so if I come down here and I start typing if I press control space then it's going to show us all the options that we have as we type so if I say editor dot and keep typing here so I typed out editor dot form then it's going to show me all of these here so format on paste format on save I want format on save so anytime I save it'll just auto format my code for me and that's a setting that I think is very useful so that we don't have to keep manually doing that and the auto formatting and vs code really is great not only does it do Python like we have set up here but it will also auto format for JSON and other languages as well and those are all things that usually require additional packages with editors like sublime text and sometimes those can be hard to get set up properly so it's nice that a lot of this stuff just simply works within the S code now this isn't part of the formatter but we can actually use vs code to sort our imports also so let me add a couple of imports here so that we can see what this looks like so underneath requests want to also import OS I'm going to also import math and now if I open my command palette and I search for sort imports you spell that correctly if I click on that then it should sort those out okay so we can see that it put these in alphabetical order and I think that it drops requests down a line here because it wants to separate out requests since it's a third party package so it probably has all those third-party packages separate from the standard library modules and if you have any imports that are from imports then it will put those closer to the bottom just because it's the standard so if instead from OS I was to say from OS import rename and then I did a sort installs or sort imports I'm sorry sort imports on that then it should move that from import down to the bottom there so just like it did so that's good okay so now let's also get code linting enabled so we can see the pop up down here that it keeps telling me that I should be using this so linting will look at our code and tell us if it thinks that something is off and it's nice to have this because it can keep you from making mistakes that you might not notice on your own so if this pop-up wasn't open here I'm just going to close it one more time then we can search using our command palette I'm just going to type in linting and now I'm gonna choose run linting when I try to run linting it's going to pop up with that pop-up so now I'm going to install that and it'll install pilant and you can use other linters as well but I think that pilant is a and nice default linter to use I haven't really tried any of the other ones but pilant has been good for me okay so one spy lint is finished installing there now let me put something in that will trigger a lending error and a warning so let me comment uncomment out here where I am printing out sis top version and instead let me use Python - syntax here for this print statement so if I save that then we can see that after a second here I get a red underline and if I hover over that I'm zoomed in a little far but we can see if we look at the bottom there it says missing parentheses and call to print did you mean print with the parentheses now if that's too hard to read there because we're zoomed in so far we can also click down here in the bottom left right beside our interpreter and we can see that there are errors and warnings so this is marked as an error if I click on that then we can see that it lists out the problems for us here so here we have one problem in our script and it says missing parentheses and call to print so then that will give me a hint as to what I need to change and I can come up here and fix that and this will give you hint about things that aren't errors as well so for example if I go down here into my greet function and I just make a variable that I never use so I'll create a test variable and just set it to the string of tests so if I run that then after a second I'm going to get a green underline here and that is for a warning if I look at that warning then it says unused variable test so usually if you have an unused variable then that might be a mistake so usually we don't want those so with that pointed out I'm just going to get rid of that to clean up the code and there we go okay so now let me show you an extension that I like to use that makes running Python code a bit easier so so far we've been right-clicking and selecting run code in terminal every time we want to run our Python code but I'm not the biggest fan of that I'd rather have an easy keyboard shortcut that does this for us and also I don't like how much output the terminal shows so the extension that we're going to use here is called code runner so I'm going to come down to our extensions and I'm going to clear our current search and I'm gonna type in code runner so when I search for that we can see the top result here is code runner so I'm going to install this now anytime you have an extension if we scroll down here let me I don't know if I can make this bigger or not it doesn't look like I can I'm zoomed in a little far here but if I scroll down then we can look at all the documentation that we have here and it'll show you you know different configurations so if we want to change our path for a specific language then we can come in here and these are the settings that we can change here and it also gives us some customized parameters here so within our path we could also put custom parameters as in you know we can use the Python path that vs code is using the full filename to the code that we're trying to run and I'll take a look at this in just a second now whenever I change some of my settings but with this installed will now see a run button in the top right of our editor here now there are a few other changes that I'd like to make to the settings of this extension but let's see what this does just right out of the box with this current Python script so if I run this then we should get some output here okay so this might look like it worked but there's one key difference here look at this right here so it says that we're using Python 3 7 and that we got our status code of 200 but the Python interpreter that it's using is the default interpreter for my system so this is the global version of Python and I do have requests installed in that global version of Python but if I didn't have requests installed then that would fail even though I do have requests installed in my virtual environment so we want to set this up to use our virtual environment instead of our global Python to see how to do this we can change our settings so I'm going to open up my settings here and within our settings let me make this one panel again within our settings here I'm going to I'll just put this here at the bottom now there are a couple of settings and I'm going to change here now I looked up what settings I'm going to change before I started the video and I have those written down here in front of me but if you want to change these to something different then you can just search through and find these settings yourself and change them to whatever you'd like so the first setting I'm going to change here is going to be code - Runner dot executors map and this is going to be a dictionary of values here so or a key value pairs here so when we run Python files I want this to use the current Python path that vs code is using I want to run that with a dash U which is a buffering option I wouldn't worry too much about that and now I also want to run the full filename and that'll give us the full path to the file that we're trying to run now again if you don't know where I got these then you just have to read the extension documentation because that was in here where I scrolled all the way down to their configuration and these are the customized parameters here so that's where I found the Python path the full file name and things like that so now I will close that down go back to our settings here now there are a couple of other things that I want to change here now you don't have to make these changes but this is my preferred settings so I can do a code runner and again I can hit control space to make this autocomplete for me and I want to change this clear previous output I want to change that to true because I don't like a lot of previous runs of my script taking up all of my screen okay and now the last thing that I'm going to change here is code runner show execution message that is true by default I want to set this equal to false I don't know about you all but I don't like a lot of output whenever I run certain things I only want the things that I'm printing out from Python so what this will get rid of here is this is the execution message where it says running and it gives you the Python that it's running and the file path there and also it'll say done with exit code zero none of that's going to show up now now it's only going to give us the output from our what we've printed out within our scripts so if I save those settings which I did and now I rerun this Python script then we can see that it cleared the previous output and now it doesn't have those execution messages it only prints out the things we wanted it to print out so we're using the correct version of Python here we can see that now we are using our virtual environment so that's good and now we also get a 200 for our status code so it is using the requests library there so that's great as well now I also told you that we had a keyboard shortcut here if I right click then we can see here at the top we have an option now to run code and that's what happens whenever we click this Run button here at the top but it tells us that the keyboard shortcut is ctrl alt in and I'm sure that you can change that keyboard shortcut as well but if I press ctrl alt in then we can see that it runs that code as well okay now one thing about sublime text you know I usually use sublime text for these videos one thing about sublime text was that people would always ask me how to do input within sublime and it was actually hard to do within sublime and I would always just recommend against it I would just recommend instead using the terminal so to write your script within sublime and then use the terminal now within vs code if we want to use input then it's kind of the same process but now we have a terminal built in so I'm going to just get rid of my code here everything except the imports and now I'm just going to use an input so I'm going to say name is equal to input and for the input I'm just gonna say your name your name question mark and now I will print out a greeting so I'll just say hello and then print out the name so I will save that now we won't be able to run this using our code runner that we just installed because that output there is read-only and that was our problem with sublime text 2 but with in vs code we can simply do what we did earlier by right-clicking and just clicking on run current run Python file in terminal so if I do that then we can see that it pops up here asking us for our name so I'll just put in Cori and we can see that our program works just fine so that is how I do that within vs code just a little side note there ok so now I'm going to undo those changes there and get back to what we had before okay so now let's look at the built in and get integration with in vs code so let's say that I wanted to track this project with git and upload it to github so to track our current project with git we can simply click on the source control tab over here in our activity bar and right now we're not tracking this project with git so I could do all of this within the terminal but we can also just do this here within the user interface as well so to track this project I can just click on this get symbol here beside source control if I hover over that it says initialize repository so I'm going to click on that and then it's going to ask me what project I want to track so I'm just going to click on my project the one that I've been working in so once we do that it's going to now put in all of the files here that are untracked now it looks like we have a lot it says there are over 3,000 but most of these are from our virtual environment and we usually don't want to even track our virtual environment so to ignore our that directory we just need to create a dot git ignore file and add that to what we're tracking with git within my folder here I'm gonna click on this icon here beside my project directory that is add new file and I want to add one that is called a dot git ignore so I will create that within there I want to ignore ve and V the V in V directory and I'm also going to ignore this dot V s code directory as well because usually you don't want to commit personal settings like that so now this gives us a visual indicator over here that these are green and has a you over here for untracked so we're only going to try to commit two files now or I'll only try to stage two files now and we can see that V s code and V and V are no longer highlighted now you might notice here that it doesn't actually show us the dot git directory either that got created when we initialize our directory so V s code filters out what files are seen by default and ones that you normally don't want to see are just filtered out so normally there's no reason to go into certain folders or directories for example dot git you never really want to go in there and mess around with it so it's just nice to filter it out say that you don't have to see it in your way now if you want to change what is shown and what's hidden then you can change that in your settings but I think that their defaults are pretty good so now let's go back to the git section so we'll click on this source control tab and our activity bar and now we can see that it only wants to stage the git ignore file and our Python script so to stage those we could hover over them and just click on the plus icon beside each file so if I do that with git ignore we can see that that got staged or if we wanted to stage all of the changes then we can just click the extra options up here at the top right and then if I scroll down here I can go to stage all changes so if I do that then we can see that now our script pi is staged as well so now to commit we can just click on this check mark here to commit and now it's going to ask us for a commit message so I'm just going to say this is an initial commit hit enter and now it's giving me a pop-up here that I haven't configured my username or email within get yet so the reason is because I uninstalled get and reinstalled it before this video so you might run into that as well so in order to set my name and my email I'm gonna want to run some get commands here within at the terminal now I use get bash so if you want to use git bash as well then we can set up what terminal we want to use within the S code so to do that I'm going to open up my browser again here and I have this integrated terminal section of their documentation opened up here and you can change what terminal you use by changing this command here terminal integrated shell dot windows so we can see here that they have the default location to get bash if you want to use get bash we can also use the command prompt by default which we have been using we can use power shell or bash on a boon to so I'm gonna use git bash here so I will just copy this entire setting here and I've already double checked this actually is where git bash was installed on my machine if you installed it somewhere else then you'll want to use that exact location but that's where it is on my machine so we can open this back up go to our settings so I'm going to open up my global settings here let me close down that terminal right now and down here at the bottom I'm just going to paste this in to use get bash as the integrated terminal so I'm gonna save that and now let me close down the terminal that we had before and now open that back up and now we should be using git bash instead and we can see that it still activates that virtual environment now my text is a little large here so I'm running on to a new line but it's large enough just so you all can see but normally this would all be on one line here so let me clear this out just by running clear there and now I can run those get configurations that I need so I'll just do a git config - - global some of you might not didn't need to do this you might already have everything for your get setup but just in case you don't then this is how you can make some of the setting changes so I will change the the name and I will also change the email so my email is kori M Schaefer at gmail.com and now if we do a git config - - list then it gives us a lot of different options here but we can see our name and email there okay so now let me close that down let me try to commit these again with those changes in place so initial commit and now it says that those were committed and now we don't have any changes so now that we have our code committed to get now it will only show us the changes that we've made since the last commit so I'm going to change or close down my get ignore file here so if I go to my script and I let me take out some of this stuff here so I am going to take out all of my imports except the request code I'm going to take out the version and the executable take out the greeting and I'm just going to leave the request code there now I'm also going to let's see I will also print the value of r dot okay that'll just tell us if we got a good response or not so now if I go back to the source control section here and look at this if I click on my script then it's going to show us a diff okay so within the diff here we have the version of the code that we last committed over here on the left and now this is our new code over here on the right so the red is saying hey you removed all of this stuff here that's what was last committed it's now gone and the green over here is saying oh and this is what was added this we didn't have this here before and now we do so if that diff looks good then you can simply stage your changes you want to close down the diff here so we staged the changes here it says that it's modified now I can commit that and as a commit message here I'll just say removed some code I know I added some too but that's fun okay so now we have committed those changes so now let's say that we wanted to commit this code up to github so this is pretty simple to do as well so we have to do is create a repository within the browser and then we can set that up to push to that repository so I've got my github open here in the browser so let me refresh this to make sure I am still logged in and it looks like I am so that's good so now I'm going to create a new repository and I'm just going to call this sample - repo so now let's see I'll just have a public no description or anything like that you can add that stuff in if you'd like obviously so once we create this repository then it's going to open up this quick setup page here and give us some commands so if we were creating a new repository from scratch then we would use these commands here but we are actually going to be pushing an existing repository so these are the commands that we need here so I just want this git remote add origin command so I'm going to copy that and that's what is going to connect our local repository to the repository on github so back within vs code here I'm going to open up my terminal and we are now using git bash like I said before so I'll clear the screen and I'm just going to paste that in that command that we got from github so I'll run that and now we have that origin so now I'll close our terminal go back to our source control and within our source control tab I can simply click here with the extra options and I'm going to select this command here push - and when I click push - it says well where do we want to push this we have this thing called origin here at this URL and that is what got added when we ran that command that get gave us or that github gave us so if I run that then it's going to push that up to github now it's asking me to log in here so let me log in really quick with my username and password it's been a while since I've logged in so hopefully that's the right password okay and now it's asking if we'd like to peer out clear on and get fetch we can select whatever we want there I'll just select yes so now it looks like that worked so let me go back to the browser oops that's the wrong one let me go back to the browser here and look in this sample repo and we can see that we got our get ignore file and our script so that is what we pushed up from the s code so that seems to be working well so that's nice so that's how you can work with git and github and vs code now if you'd like to learn more about git then I do have a detailed video on that and I'll leave a link to that video in the description section below if anyone is more interested in learning all of the fundamentals with git now I also plan on doing a video on github in the near future but I haven't got around to doing that just yet but for this video I just wanted to cover the basics of their git integration and just show you how to get started with that ok so now let's look at how to do some basic debugging within vs code so this is a really nice feature that doesn't come built-in with some of the other minimalist editors out there so we're back here in our script and to put in a breakpoint we can simply come over here into the gutter and we can where it has this red line here if I click that then we have now added a breakpoint into our script so now if we want to debug this code we can come into the debug tab over here in our activity bar and now let me make this a little bit larger here we can see that it says we don't currently have any configurations but if I click the little gear icon here then we can see some different configurations so we have Python file we have module Django flask so you can set up these configurations to where it'll run you know your main flask app from there and you can also specify ports and stuff like that for this video we're just going to look at debugging a basic Python file so I'm going to select Python file it's going to show us the launch configuration that we just created so I'm going to exit that and now we have a configuration set here for Python a current file so if I that just by clicking this green arrow here that says start debugging now this is going to start a debugger here what this is going to do is it's going to run our code and it's gonna stop at our breakpoints so now we can interact with our code as it is at the moment of that breakpoint so if we look here and the top left then it'll show you all of the current local values in our code and we can drill down into these as well so we can see that we have this our variable here I can drill down into that to see exactly what all of this is so we can see the headers the encoding the cookies things like that so we can keep drilling down as far as we want so right underneath that local variables we also have a watch section so we could if we wanted to watch a specific variable then we could just click the plus sign there and now specify what we want to watch so let's say that I want to watch our dot status code so we can see that that is equal to 200 so that is the current value of where we are in that breakpoint now if we were watching a value that was in a loop or something like that then we'd actually be able to see that increment each time through the loop if we had a breakpoint within that loop now if you want something more interactive then we can also use let me make this a little smaller over here we can also use the debug console and use this to inspect anything we'd like so I'm gonna click on our additional views here click on debug console and within the debug console we can just use this like an interactive Python prompt so if I wanted to see the value of r dot okay then i could just run that and we can see that it gives us this feedback of exactly what these values are equal to at this point in the script so that's extremely useful and you can just look at anything you'd like so if I want to see our dot URL then we can see the URL that we requested there so being able to jump into the code at a specific location and see the current values can be extremely useful in a lot of situations so debugging like this is so much better than dropping down a lot of print statements or log statements all throughout your code and just running your code over and over this usually allows you to keep your code clean and see all of this information that you need in order to make sure that your code is working how you expect and if not then you know hopefully it'll at least help you out enough to where you can find out where to go fix your code so once you're at a breakpoint we can see that we have several options here and those are all listed right here so we can continue on by clicking this button here we can step over a current breakpoint we can step into the code further we can step out of the code or we can restart or stop our debug session here so I'm just going to continue on and when I continue on it's just going to continue on with our script and since we don't have any more breakpoints it's just going to finish that so now if we want to remove a debug breakpoint then we can just click on it over here and the gutter and now it's gone okay so that is a look at debugging okay so the last thing that we're going to take a look at in this video is the unit testing support that they have built in to vs code and I'm really loving their attention to detail and how they covered so many different aspects of helping us manage our code as easily as possible so having the built-in support for all this stuff is definitely a nice addition that you're not gonna find in most other editors so to show some unit testing I'm going to close down my current project and I'm going to open up a different project that has some sample unit tests so I'm going to close both of these down it looks like I have two of them open up here so I'm going to close both of these down oops actually this is my setup there so I'm just going to close that so now let me open up my terminal and within my terminal I'm going to navigate to my desktop and within my desktop let's see if I can open up vs code here from my terminal so the command that we can use is code so if I say code and then my directory and this directory is called unit testing demo if I run that then it looks like that works it opens up that directory within vs code now I've had times where it doesn't install that code command to my path so if it doesn't and it says you know code command not recognized or something like that you can always install that by opening up your command palette so control shift P and if I type in shell then we should let's see or is it code maybe it's not coming up because it is installed but there is something if we type in shell or code or something like that then it'll say you know install the code command on to your path but I'm not seeing it here now but that's okay because we already have that code command installed so now we have a project here with some sample unit tests so let me open up these unit tests here and let's see now this is giving me a pilant or not installed error again now the reason that it's doing this is because we installed pilant when after we activated our virtual environment last time so I'm just going to say to install that for our default Python as well so that we stop seeing those pop-ups okay so now let me open up both of these unit tests here okay so now that we have some unit tests available here let's run open up our command palette and now let's type in discover tests and when we run discover tests then it's going to come up with this pop-up here that says enable and configure test framework so I'm going to click on that and now it's going to ask us what unit testing framework we want to use PI test is very popular I'm using unit test in this example but you can select whatever it is that you're using now we're gonna choose the directory that contains our unit tests and that is our current directory so our root directory and now the pattern to identify the test so there are a bunch of different naming patterns here the one that we are using is test underscore and then asterisk the wildcard name of the file so I'm use that and now it should discover our unit tests for us and after it discovered that unit test we can see that we had these pop-ups here with in vs code that says run test debug test right here within the editor so we can run a single test at a time if we want so if I was too drunk check this test add test here if I run that then we can see that that got a checkmark but none of these other ones actually ran and down here at the bottom left we can see that it says one test passed now if we run want to run our entire test class then we have that option here as well too so I can go click on run test class and now we can see down here at the bottom it says four tests have passed so let me change one of these assertions to where one of these tests will fail so that we can see what that looks like so I'm going to say 10 plus 5 is equal to 10 which obviously isn't right so now this is also asking us if we want to use our formatter as well so I'll go ahead and install that also so now if we run our tests here then now we can see it says three tests pass one test failed so if I click on this status down here in the bottom then it'll ask us what we want to do so we can run all of the tests again we can simply just run the failed test which is a nice feature as well or we can view the test output if I look at the test output here then we can see it ran for test one of them failed and it failed because of an assertion error that 15 is not equal to 10 and that it failed on line 8 so it shows us exactly where that error occurred so then we can come in here and either fix our code or fix our tests whichever one was broken and then we can rerun all of those again and we can see that oops and it looks like I didn't save that so if I save that and rerun those again then we can see that all of those passed now lastly it actually just opened this up automatically just now but lastly we get an additional tab over here in our activity bar and this is a testing tab so when I click on this this gives us a nice visual indicator if our tests are passing or failing so again let me change this to where it is failing and save that and now we can also run these tests within this testing tab over here as well so if I want to rerun our entire test calc class I can click on that we can see that that failed because this single test here failed all of these seem to do well so we can look at the output and everything like that just like we did before but if I change that back go back here and rerun all of my tests then we can see that now those are passing let me run that entire class and we can see that all those are passing now so I think that this is an awesome interface for seeing all of our tests in one place and if something is failing then we can come in here and just rerun a specific test by running it individually instead of rerunning our entire test suite so I think it's an awesome feature that's built right in the vs code now there's one last thing that I want to show you in this video and it's only going to take one second so I have some other preferred settings that I haven't shown in this video and most of them are settings for changing how they editor looks in full-screen send mode and will allow me to run code without too much other stuff getting in the way and I want to show you these settings so that you can see exactly how I'm gonna have my vs code set up if you see me using this editor in future videos because I get a lot of questions about exactly how I setup my editors so I have those settings pulled up open here in my browser so let me open those and pull these settings up so these are available on my github and I have these open in the raw version here right now so I'm just going to copy these now these are actually my Mac settings so I don't have you know the windows integrated terminal settings in here and things like that but most of these are the same but for now I can just use these because it will show you the Zen mode changes that I'm going to show you here in a second so now I'm going to open up my settings and I'm just going to paste all of those in that I got from github so I'll save that and run it we can see that this is a little smaller text here because these are the settings and I actually use on my machine so it's not super zoomed in let me take these up a bit let's see so I think maybe 20 font would look better so yeah I think that'll look good for the rest of this video so I can close those settings and like I said the settings that we just added in there most of them are the same from the ones that we saw earlier in the video but the new ones just changed how the editor looks in Zen mode and Zen mode is just their distraction free mode that allows you to focus more on your code and your output and hides a lot of the other menus and things that you might find distracting so let me open up Zen mode so I open up my command palette and just type in Zen and open up Zen mode here and we can see how I have this set up it's you know takes away our activity bar the blue bar down here at the bottom so it's just a lot more clean and the nothing is distracting us from the code itself and we can still run code by just clicking up here and clicking run code now it's telling me it can't find the specified path and the reason is because like I was saying these are my Mac settings so the path that I have set up for my Mac is this is more of a Linux style path it's this user local bin Python here so we would have to go into our settings and set that equal to what we set it to before when we used Python 3 from our Windows system but basically I wanted to show this because if I do use vs code in future tutorials then this is likely how you're going to see me using it the code will look a lot like this so the editor that I normally use for videos is sublime text and I really like some lime Texas minimalist look so that we can just focus on the code and the output but with sin mode setup like I have it set up here we have a very similar nice minimalist setup here in vs code as well so you might see me using this if I completely make the switch over to vs code ok so that's all I wanted to cover for the Python features that I wanted to show you in vs code now there's a ton more to learn about vs code itself but I might save that for another video if anyone is interested most of the additional things that I like to cover is just how to use some of the editor features like multiple cursors and some of my favorite keyboard shortcuts but if you'd like to see some of these keyboard shortcuts for yourself then they make it easy to learn these so we can just open up the command palette and search for keyboard whoops spelled that wrong keyboard shortcuts and the first result here is keyboard shortcut references and this will open up a web page and we can zoom in here and we can see that this shows is basically how to do anything within vs code that we'd want to do so we have all of the multi cursor selection here file management search and replace things like that so that is a nice reference there if you would like to learn any of those keyboard shortcuts okay so I think that is going to do it for this video I hope you all found this video helpful especially if you're trying to switch over to vs code for your Python development so personally I think they really knocked it out of the park with this editor as you saw they have so many features that are built in and the features that aren't built in are really easy to get installed and configured it's not like other editors where you have to search through you know ten to twenty different packages and find the one that you like the most and then use that one and make sure that it stays supported and things like that it's not like that with vs code it makes recommendations to install what it suggests and then it just makes it easy to get those up and running but if anyone has any questions about what we covered in this video then feel free to ask in the comment section below and I'll do my best to answer those and if you enjoy these tutorials and would like to support them then there are several ways you can do that the easiest way is to simply like the video and give it a thumbs up and also it's a huge help to share these videos with anyone who you think would find them useful and if you have the means you can contribute through patreon and there's a link to that page in the scription section below be sure to subscribe for future videos and thank you all for watching you

Channel: Corey Schafer

Views: 504,156

Rating: 4.9429464 out of 5

Keywords: visual studio code, vs code, visual studio, vscode, python, vscode python, python visual studio, vscode setup, visual studio code setup, python in visual studio code, python development environment, vscode windows, python vs code, vs code windows, python windows vscode, python mac vs code, python tutorial, corey schafer, python programming

Id: -nh9rCzPJ20

Length: 75min 16sec (4516 seconds)

Published: Wed May 01 2019