Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Here we'll take a look at Visual Studio Code's user interface, as well as how to save files.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Let's take a quick look at how
Visual Studio Code is laid out.
0:00
We've talked about the file explorer.
0:04
This is where you can view, create, and
move around the files for your project.
0:06
A little further left, we have what's
known as the activity bar, which has some
0:11
different features that are mostly beyond
the scope of an introductory course,
0:15
but I wanted to point it out
because if you ever find that you've
0:19
accidentally clicked on something strange,
and you aren't sure where you are,
0:22
you can click on this top icon to
get back to your file explorer.
0:26
You may have noticed that
when you first open VS Code,
0:30
there was a welcome screen
with some handy links.
0:32
If you don't see it, you can access
it in your menu by choosing Help, and
0:35
then Welcome.
0:39
From the welcome screen, you can
access recently opened projects and
0:40
links to help you learn
more about VS code.
0:44
To open and work on a specific file, click
on the file name in the file explorer, and
0:47
it will open on the right.
0:51
You can have as many files open as
you'd like, and switch back and
0:54
forth between them by clicking these tabs.
0:58
Note that the tabs can be re-ordered and
moved around just by clicking and
1:02
dragging them.
1:06
Here's a great little trick
that VS Code will do for you.
1:07
In the index.html file,
type an exclamation point followed by Tab,
1:09
and that will give you all of the basic
HTML you need to start a basic website.
1:15
Notice that when I made a change,
1:22
a dot showed up next to
the file name on the tab.
1:23
This means that there are changes
to this file that need to be saved.
1:27
I can type Ctrl+S on Windows or
1:31
Cmd+S on a Mac to save the active tab,
and that dot goes away.
1:33
Or on a Mac,
Cmd+Opt+S to save all open tabs.
1:40
These options are also
available in the file menu.
1:45
To view two tabs at once,
click this icon in the right corner.
1:51
This opens the active tab in its own pane.
1:57
I can close it on the left just to avoid
confusion, and this would allow me to edit
2:00
my index.html file and my css file at the
same time, which can come pretty handy.
2:04
If I no longer want to view both at once,
I can grab this tab and drag it back over.
2:10
And that's how you can create, open,
save, and arrange files in a text editor.
2:16
What if I'm coding away on a project in my
text editor, like a simple web page for
2:21
example, and I wanna preview my
work like I can in WorkSpaces?
2:26
We'll talk about how we can
do that in the next video.
2:30
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up