Visual Studio Code for CS50 - CS50P Shorts

Key Takeaways

so [Music] [Music] all right this is cs50s introduction to programming with python my name is david malin and this is an introduction to visual studio code for cs50 visual studio code or vs code is very popular program nowadays for writing code it's technically a text editor or nowadays really an ide an integrated development environment which means it's a program that's designed for enabling you efficiently and effectively to write code in your computer now it turns out you typically install vs code on your own mac or pc it's free open source software which means anyone can download it on their own computer but typically when installing it on your own computer particularly to use for programming with a language like python there's a few other steps as well you need to install support for python itself you might need to configure some of the lower level implementation details of your computer just so that things work and so instead for this course we recommend that you use vs code yes but you use it in the cloud by way of cs50's own implementation thereof on top of something called github code spaces which is a hosted version of the same to use visual studio code for cs50 go to code.cs50.io where you'll be prompted to log in with your free github.com account after some number of seconds or minutes you'll then be redirected to your so-called code space which is your own virtual space in the cloud somewhere out there on github servers you will have access to your own storage space really your own hard drive in the cloud in which you can create files run programs and even organize everything in folders you'll also have the ability to write code via that interface and and much more the interface you'll see typically looks a little something like this whereby you'll have at the top left hand of your screen a file explorer that allows you to see all of the files you've created over time in your account you'll then have the ability at the top to actually write code by creating one or more tabs in which to write your programs and then perhaps less familiarly at the bottom of the screen you're going to have access to what's called a terminal window a terminal window is a command line interface or cli which is very much in contrast with what you and i are mostly familiar with nowadays which is a graphical user interface or gui indeed everything we're seeing here is graphical by nature there's buttons and icons and windows and more but underneath the hood you actually have access not only to your own virtual hard drive in the cloud but actually your own server too somewhere out there on github servers is your own server in a sense your own virtual server or technically called a container in which all of your own files will live you then have the ability to create files run programs even install additional software within that server or that container because that server container is itself running its own operating system and the operating system it's running is not mac os or windows with which you're probably familiar but another popular operating system called linux and linux is used by so many programmers and more nowadays not only to write code but to run it on their own servers as well so how can you go about leveraging this new command line interface well it's worth learning just a few commands that you might not have typed previously these commands work not only in linux but also on mac os and also with some modification potentially on windows as well but if you're using visual studio code for cs50 in the cloud at code.cs50.io you'll have the ability to run all these commands and more and here is just a few of those that you can type i'm going to go ahead now and type code which actually is a command that comes with vs code itself that enables me to create new files and open new tabs i'm going to change screens over to my own computer here in which i have full screen vs code for cs50 so this is my browser window full screen connected to my own code space my virtual container in the cloud and suppose that i want to go ahead and create my own first program called hello.pi a program written in python in my terminal window i could type code hello dot pi and hit enter but before i do notice at top left in my so-called file explorer there's technically nothing there there's some mention of code spaces and some mention of my own unique id but there's no actual files or folders there yet but when i hit enter thereby creating a new file called hello.pi i'm not only going to see it up here in just a moment in a tab where i can edit it i'm also going to see a graphical representation of it up here which is only to say that this environment this integrated environment all works cohesively here we go hitting enter my tab has opened my prompt is blinking here so i can start writing code but you'll also see that hello.pi not only exists but is highlighted as the file i've opened well let me go ahead and write a very simple program now print quote unquote in parentheses hello comma world which as you'll see if not already is perhaps the most formative most canonical program you can write first when writing code in most any language i'm going to go ahead now and in my terminal window i'm going to run one other command that you'll learn all the more about soon too i'm going to run python itself which is not only a language it's actually a program that understands that language and if i specify not just python but a space and the name of a file that i have created containing code written in that language crossing my fingers as always and hit enter i've just run my own program now on our macs and pcs we're generally in the habit of like pointing and double clicking on icons or on our phones tapping on icons to launch some file or program in a command line interface or cli everything is done with the keyboard you can use your mouse to move your cursor up and down as needed but generally you do everything with your keyboard not really with your mouse everything else on the screen can be clicked on but in your terminal window you'll generally see this prompt a single dollar sign that does not mean dollar or currency for that matter it's just a standard symbol that means type your commands here and it's a visual indicator that you can type your next command and indeed the two commands i've just typed are code to create my new file within vs code itself and then python which we cs50 already pre-installed into your code space so that you have built-in support from day one with writing your own code now there's other things i can do in this environment i for instance could control click or right click up here and see a whole menu of options with which to edit or modify that file just like on mac os or windows i could click on some of these icons at top left the plus icon to create a new file or a new folder so all of those gui conventions graphical user interface conventions are still there but you will and should get more comfortable over time with the command line interface alone which does all of those things and more for you in fact here are just a few more of the commands that you can use within linux and this command line interface specifically we'll see in a moment ls which allows you to list all of the files in your current folder cp which will allow you to copy a file from one place to another mv which will allow you to move a file or really rename it from one name to another rm for remove which will allow you to delete a file make dur or mkdir which will allow you to make a directory that is a folder cd which will allow you to change directories from one folder to another rmdir which will allow you to remove a directory and then clear which will just aesthetically clear your terminal window if like me you like to keep things a little bit tidy now these are just some of the commands you can type within linux at this command line but they're really equivalent to all the kinds of things you and i already do frequently on our own macs or pcs let me go back to vs code here and let's just try out a few of these here i'm going to go ahead and first clear my screen as though we're starting from scratch but this doesn't change or delete any of my files it just clears my terminal window i can alternatively hit ctrl l to do the exact same now i'm going to go ahead and type ls but before i hit enter note that ls kind of sounds like list and indeed this command and almost all of those others were fairly succinct in that ls means list but you only type the l and the s no l i s t and this is true of a lot of command line interface commands just to enable you and i to type things more quickly a lot of these commands have these uh this very succinct syntax and names so here we go i've typed out ls already i'm going to go ahead and hit enter and you'll see only one thing hello.pi which is to say when i try to list all of the files in my current default folder that just automatically opens when i launch vs code in the cloud i only see the one file exists which i can also see graphically here well let me go ahead now and do something else let's make a copy of this file and call it goodbye.pie just so in anticipation of writing a second program that says goodbye world instead of hello i'm going to do cp for copy then the first name of the file hello.pi then a space and then the new name for the new file goodbye dot pi enter and now notice nothing really has happened that's generally a good thing if you don't see an error message down here you've done well but you do see graphically up here that both files now exist now i could open goodbye.pi in a couple of ways i could actually just go up here and double click on goodbye.pi to open it here or i can type the same command as earlier code of goodbye.pie and now i'll have a second tab open here and for parallelism i could change this word from good hello to goodbye just so i have a second program now that is indeed the second file as well now what if i decide that i don't want this file and i'm going to go ahead and close it here and i want to rename it and change it to from from goodbye.pi to farewell.pi well it still says goodbye.pi up here and if i type ls down here i'll see a list of two files now that are in that same folder let me do mv for move goodbye.pi and then something like farewell dot pi instead enter and you'll see that it changed up here at left and if i type ls again you'll see that it changed down here as well well you know what let's never mind with farewell to pi let's go ahead and just remove this file altogether i could go up here and single click on farewell.pi in my file explorer control click or right click and then select delete or down here in my command line interface i could do this i could do rm space farewell and now notice if i'm a little tired of typing out these long file names linux and command line interfaces frequently support autocomplete so instead of typing farewell i'm going to type far which sounds like more than enough characters to finish the rest of my thought and i'm going to hit tab on my keyboard and it just finishes it for me without having to manually type the same i'm going to go ahead and hit enter and i'll see a somewhat cryptic message now as many of them admittedly are it's not an error it's just a prompt remove regular file quote unquote farewell.pie this is just a safety check to make sure that i'm okay with deleting this file generally when prompted with a question like this go ahead and type in y for yes or n for no and hit enter and now nothing bad seems to have happened in terms of any messages but indeed farewell.pie is now gone well what more can we now do let me clear up the screen just for aesthetic's sake here and let's create one or more folders not just files let me go ahead and make a directory here with make a make dur and let me just call it folder though i could call it anything i want alternatively i could go up here to my file explorer click on the plus icon here on the folder and manually create a no folder as well but here again the goal is to focus on this command line interface instead alright make dur folder and hit enter nothing seems to happen in the way of error messages but now notice there's not just hello.pi but a folder or directory called folder well what now can i do with that well let me go ahead and see what's inside well in my gui my graphical user interface i could click on the folder here in this little triangle and look inside and of course there's nothing there because i literally just created it but let me do this now in my terminal window let me type ls after clicking down here and we'll see both my folder which by convention has a slash at the end to make visually clear that it's a folder not a file and there's hello.pi let me go ahead now and change directory now on mac os or windows we would again just click or double click on the folder and see what's inside and a command line interface you need to be more deliberate cd space folder with or without the slash is fine and then hit enter and now you'll see that your prompts change there's still a dollar sign but by convention and this is a cs50 detail though other people do this too in the world we have prefixed your prompt with a just quick reminder of what folder you're in so that you don't forget whether you're in your main folder where you began or some other folder they're in i'm going to go ahead now and type ls to list the contents of this folder and of course there's nothing there because i haven't created any files but if i do this i could do code of farewell.pi again to bring it back but this time in this folder hitting enter you'll see a new tab opens here where i can write some more code but you'll also see hierarchically here the farewell.pie is now inside of this folder now suppose this is a mistake and i didn't mean to do that what can i do well let me close the tab here even without writing any code and down in my terminal window let me do this i'm going to type ls to confirm that yep farewell.pi exists there but suppose i want to move it into my main folder well like on mac os or windows i could click on the file here farewell.pi and just kind of drag it up or down to put it where i want but let's move it not rename it this time but move it using that same mv command instead i want to move farewell.pie to the parent folder in the world of files and folders you can think of things like a family tree and if you want to go up hierarchically you want to go into the parent folder so to speak whereas folder is conversely a child of the default folder in which we began so i want to move farewell higher up how do i express that well another piece of syntax in a command line interface is typically this dot dot dot dot is a symbolic representation of whatever the parent directory is no matter what its name is in this case it's my own default folder doesn't even matter what its name technically is it's not pictured on the screen i'm going to go ahead and hit enter and watch what happens at top left in the graphical version of the same we should see that farewell.pi now pops out of the folder and the indentation change to imply that it's not inside of the folder now it's alongside hello.pi indeed if i close the folder here i don't see a difference because there's nothing in there as well let me type ls to confirm in my terminal window there's nothing in folder let me now go back to my parent directory and i can do this in different ways and like with programming itself there's going to be many ways sometimes that you can navigate a command line interface here's one i can do cd for change directory and then space dot dot to go back to the parent directory but another technique especially if you're a little less comfortable with this whole new world is whenever in doubt if you want to go back to your default directory in which you began when you logged in just type cd with nothing after it and hit enter and you'll be whisked away back to the starting point indeed if i type ls now i'll see farewell.pi my folder if empty and hello.pi as well now i don't really need this folder because there's nothing in it anymore so let's go ahead and delete that i could click on it with ctrl click or right click in the file explorer and i could delete it manually like in mac os or windows or i can use my new found commands rmdir for remove directory space folder with or without the slash and hit enter and because it's empty i'm not even prompted it just goes away quite cleanly and a final technique that you'll find quite helpful in the context of a command line interface is that it tends to store your whole history of commands in fact not just autocomplete but if i hit up and up and up and up you'll see my history of all previous commands scrolling up on there on the screen which is helpful if i just want to execute one of them again i don't need to manually type it out i can scroll up and down and find the one that i want so this then is just a scratching of the surface of a command line interface in the context of visual studio code in the cloud most of these commands would be the same whether on your mac or pc at least if you're using a terminal window that's connected to a computer running linux be it a container a virtual machine or an actual server somewhere in the cloud in the weeks to come for this class will you have access to code.cs50.io and in turn your own code space so that you have access 24 7 365 via a browser alone so long as you have internet access without needing to install anything on your own mac or pc toward the end of the semester if you're feeling more comfortable and would like to use the same software vs code if not linux as well you'll be able to also install those for free on your own mac or pc and continue programming onward even after the course's own end this then was visual studio code for cs50 and with it a command line interface and this is cs50 itself