DAVID MALAN: All right.
This is CS50's Introduction to Programming with Python.
My name is David Malan 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.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 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 screened
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 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 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 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 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, dir, sir, 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 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 in 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 it 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 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 I'll altogether.
I could go up here and single click on farewell.py
in my File Explorer, control click, or right click, and then select Delete.
Or down here on 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.py is now gone.
Well, what more can we now do?
Let me clear up the screen just for aesthetics 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 this command line interface instead.
All right.
MKdir 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 in 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 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 just began, 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 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, the 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 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.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 it 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.
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 the 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 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.cs.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 this 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 courses own end.
This then was Visual Studio Code for CS50,
and with it, a command line interface.
And this is CS50 itself.