Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Introducing the VS Code Text Editor!
You have completed Introducing the VS Code Text Editor!
Preview
Learn how you can easily create, open, and arrange files with a text editor.
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
In this video, we'll see how to manage our
coding project files using a text editor.
0:00
All of your projects will begin
with a single main project folder
0:06
stored on your computer.
0:08
That main project folder will
contain all of the files and
0:10
folders your coding
project will need to run.
0:13
Let's create one now.
0:16
Remember that there's nothing special or
0:18
magical about the files you
create with the text editor.
0:20
They're just files on our computer.
0:23
To get started creating
a new coding project,
0:26
I'll create a folder on my computer
called My Awesome Website.
0:28
You'll choose where to save
this folder in your computer.
0:35
To stay organized,
0:38
you may want to create a special folder
to store all of your coding projects.
0:39
I'm saving mine to a folder that
I've made called Coding Projects.
0:44
Now that I've created a project folder,
0:48
there are a couple of ways I
can open it in a text editor.
0:50
On a Mac,
0:54
I can simply drag the folder I just
created to the VS Code icon on my toolbar.
0:54
Close these release notes.
1:02
And as you can see, here is my
folder open here on the left side.
1:05
Alternatively, I could open VS Code first
and choose File > Open from this top menu.
1:10
When you open a folder in VS Code,
1:18
the folder structure will
display here on the left side.
1:20
This area is known as the file explorer,
and
1:24
it works in a very similar way to
the file explorer on your computer.
1:26
It's a file tree that will
allow you to view and
1:30
interact with the structure
of your project.
1:32
Now that I've opened my main
project folder in VS Code,
1:35
I'm ready to create additional files and
folders.
1:38
There are few ways to add new files.
1:40
Here in the file tree,
you can see the folder I just created, and
1:43
if I hover over it,
you'll see some options pop up here.
1:46
The first one is a button
to add a new file, and
1:51
the second one is a button
to add a new folder.
1:53
Click on the button to add a new file and
1:55
an input field appears allowing
us to name the new file.
1:58
I'll name this file index.html,
don't forget your file extension, and
2:01
I'll hit Enter, and my new file is
created and I can view it over here.
2:06
We just created it, so
of course, it's blank.
2:11
Notice how over here, my file is
indented a bit from the top-most folder,
2:14
that indicates that this file
is inside of the main folder.
2:19
If I created another file, let's create
a styles.css file for example, you're
2:23
able to tell by how they're indented that
both of these files are on the same level.
2:30
I can also click this arrow to open and
close the parent folder.
2:35
Say I want to create a new folder to
hold some images that I'll be using for
2:40
my project.
2:44
I can do that by hovering the folder
where I want to create the new folder,
2:45
in this case, my main folder,
and click on the new folder icon.
2:50
I will call it images, and
2:55
my new folder is created inside
of my main project folder.
2:57
Oops, notice that when I made the image
folder, I forgot the s at the end.
3:02
To change the name of a file you've
created, you can right-click on
3:06
the filename, and here in the menu,
we have the option to rename it.
3:09
Notice that right-clicking on a folder
will also give me the option of creating
3:15
a new file or a new folder within it.
3:19
What if I wanted to add
existing files to this folder?
3:23
Maybe I have images already on my computer
that I want to add to my project.
3:26
I could pull up my computer's finder or
file explorer to locate my project,
3:31
then put images inside, but
I can also right-click on any file or
3:36
folder I have open in VS Code and
choose Reveal in Finder.
3:40
Now, I've got my coding project
open on my computer, so
3:47
I can simply locate the images on my
computer that I wanna put in this folder,
3:50
and move it over.
4:00
I could also drag an image directly
into VS Code, and it will move it.
4:04
Now, I have both of those
images inside of my project.
4:12
Finally, notice that I can move files and
4:17
folders around in VS Code using the file
explorer by clicking and dragging.
4:19
For example, I can move an image out of
the image folder simply by dragging it,
4:24
and VS Code will ask me to
confirm that move, and now,
4:29
you can see it's no longer
in the images folder.
4:33
Then I can move it back by clicking and
dragging.
4:37
Great, so I've got a basic file
structure setup for my project.
4:41
How can I edit and save these files?
4:45
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