Transcript
Use with ChatGPT / Claude Auto-scroll A
Explains what Visual Studio Code is and why CS50 uses a cloud-based version through GitHub Codespaces. Introduces the basic interface, including the file explorer, editor, terminal, and the Linux environment behind it.
Speaker A
All Right, this is CS50's introduction to programming with Python.My name is David Malan and and this is an introduction to Visual studio code for CS50.Visual studio code, or VS code is a 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 CS50IO where 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 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 familia 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 CS50IO, you'll have the ability to run all these commands and more.
Demonstrates basic command-line workflows for creating, opening, copying, renaming, deleting, and running Python files. Also covers autocomplete and the safety prompt when removing files.
Speaker A
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 screens 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 Py, a program written in Python.In my terminal window I could type code hello PY and hit Enter.But before I do notice, at top left in my so called File Explorer there's a.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 py, I'm not only going to see it appear 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 PY 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 pointing and double clicking on icons, or on our phones, tapping on icons.You 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 thus our 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 or 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.MKDIR 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 Control L to 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 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, py.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, py.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, py.Then a space, and then the new name for the new file, Goodbye, py.Enter.
And now notice nothing really has happened.And 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 PY in a couple of ways.I could actually just go up here and double click on Goodbye PY to open it here.Or I can type the same command as earlier code of Goodbye PY and now I'll have a second tab open here.And for parallelism, I could change this word from 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 from Goodbye Py to Farewell Py?
Well, it still says Goodbye PY 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 PY and then something like Farewell PY 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 py, let's go ahead and just remove this file altogether.I could go up here and single click on Farewell PY in my File Explorer control, click or right click and 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 py.This is just a safety check to make sure that I'm OK 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 Python is now gone.
Shows how to create directories, move into them, place files inside, move files back to the parent folder, and return to the starting directory. Ends with removing an empty folder using command-line tools.
Speaker A
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 Mkdir 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 on this command line interface instead.
All right, make dir folder and hit Enter.Nothing seems to happen in the way of error messages.But now notice there's not just hello py, 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 Py.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.
In 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 prompt changed.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 spanned, or some other folder therein.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 any files.
But if I do this, I could do code of Farewell py 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 that farewell py 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 py 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 PY 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 PY 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, 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 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 PY now pops out of the folder and the indentation changed to imply that it's not inside of the folder.Now it's alongside hello py.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 py, my folder if empty, and hello PY as well.Now I don't really need this folder because there's nothing in anymore.So let's go ahead and delete that.I could click on it with Control 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 newfound 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.
Highlights command history as a helpful terminal feature and wraps up by emphasizing that these tools work in the cloud and can later be installed locally. Concludes the introduction to VS Code and the command line for CS50.
Speaker A
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 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 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 or 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 to 247365 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.