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 about some of VS Code's most useful out-of-the-box tools, such as autocomplete features and find and replace.
Learn more about Emmet
Learn more about IntelliSense
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
Visual Studio Code comes with some
pretty cool stuff right out of the box,
0:01
meaning without installing anything extra.
0:04
One of my favorite built-in
features is called Emmet.
0:06
Emmet allows you to write HTML and
CSS lightning fast using a shorthand.
0:10
Here's a quick example of what it can do.
0:14
Say I needed to create
an unordered list with a class,
0:17
and that unordered list needed
to contain three list items, and
0:20
each of those list items
needed to contain an image.
0:24
That's a lot of typing.
0:27
But with Emmet you can type
the shorthand ul.my-list which is
0:28
what I am naming the class that's
gonna go on the unordered list,
0:33
and inside that we'll
have list items times 3.
0:38
And inside those list items image.
0:42
Now I can press Tab, and
all of that code appears like magic.
0:46
It's an amazing time saver and
a lot of fun.
0:50
See the teacher's notes for
more about Emmet.
0:53
VS code includes many
other handy shortcuts.
0:55
One of the keyboard shortcuts
I use the most is Shift+Tab.
0:58
This allows you to tab your
entire code block backwards.
1:02
Especially handy for when your
code is starting to get messy and
1:06
you need to clean it up a bit.
1:10
To that I can simply highlight the code
that I want to tab backwards and
1:11
Shift+Tab, and
the whole thing goes backwards,
1:15
and the whole thing goes forwards.
1:18
By the way, don't worry about memorizing
any of the keyboard shortcuts that we
1:22
discuss in this video.
1:26
I'll include them all along with other
resources in a resources guide at the end
1:28
of the course.
1:32
Another of my favorite shortcuts is
the ability to comment out multiple lines
1:33
of code.
1:38
You can highlight what
you wanna comment out and
1:38
use the keyboard shortcut
Command forward slash.
1:41
VS Code knows how to correctly common
out the code based on the type of file
1:45
you're in.
1:49
As you can see, it works for
JavaScript too.
1:50
To uncomment highlight and
use Command forward slash again.
1:57
Another useful feature is the ability to
select and change multiple items at once.
2:02
Say I wanted to select these image
elements and change them to anchor tags.
2:07
I can highlight the first one,
2:14
then hit Command D until I've selected
each element I want to do something with.
2:16
See how they highlighted one by one?
2:22
Now I can change all the image
tags I've selected to anchor tags.
2:24
The shortcut Shift Command L
highlights every element on the page.
2:28
Let's use it to change all of
the source attributes to hrefs.
2:33
Click on the first source attribute and
2:38
then Shift Command L
to highlight them all,
2:42
and then we can change
them to hrefs all at once.
2:46
We can also use this feature to
get rid of all of these alt tags
2:50
at the same time.
3:01
The find and replace feature comes
in handy quite a bit, as well.
3:03
Say I have a large style sheet, and
3:07
I wanna find all of the CSS
rules related to the header.
3:09
I can press Ctrl + F on Windows or
3:12
Cmd + F on a Mac to bring up the find and
replace options.
3:14
I can search for whatever I'm looking for
and the results will be highlighted.
3:20
I can rotate through the instances found
by clicking these left and right arrows.
3:24
And if I wanna find and
3:30
replace, I can click this arrow
to open the replace option.
3:31
And I can replace the instance I have
chosen by typing a new word in the box and
3:36
hitting Enter.
3:41
And it changed over here.
3:44
You can search through your whole
project by pressing Ctrl+Shift+F on your
3:46
windows or Cmd+Shift+F on a Mac.
3:51
VS Code will show you a list to the left
of all the instances of your search term.
3:54
You can click on the one you want,
and it will take you to that file.
3:59
When you are finished, click the explorer
icon and the find pane will go away.
4:03
VS Code also has some handy
autocomplete features.
4:11
If I wanted to link a style
sheet to my HTML file for
4:14
example, I could go to the head of my
HTML document and start typing link.
4:17
As I type,
you'll see a list of options pops up.
4:26
If I type link and press Tab,
VS Code will auto-complete a link for
4:29
me, and all I have to do is add the path
of my style sheet to this href.
4:35
Auto-complete also works for
HTML elements.
4:44
If I wanted an image tag for
example, I can type img then Tab,
4:47
and it autocompletes that tab for me.
4:53
VS code will also close any of my
HTML tags automatically if I type
4:57
the tag name with no brackets.
5:02
When you're writing CSS, VS Code will
suggest possible properties as you type.
5:06
When it suggests background, I can
press Enter to accept the suggestion,
5:14
or select another option from the list.
5:19
And as you can see, for
5:22
the background value it's suggesting
background color choices to me,
5:23
based on the other color choices used
in this file, which is pretty handy.
5:27
VS Code can also help you
out in JavaScript files.
5:32
Here I've defined a function.
5:36
If I wanna call that function I
can start typing its name, and
5:39
VS Code will suggest that function.
5:42
I can press tab or enter to autocomplete.
5:45
This VS Code feature is
called IntelliSense, and
5:48
it is normally associated with an IDE,
or Integrated Development Environment,
5:51
which you can think of as a super powered
text editor that comes with all sorts
5:57
of debugging and automation tools.
6:01
In other words,
6:03
VS Code comes with many more features
than a traditional simple text editor.
6:03
See teacher's notes for
more about VS Code IntelliSense.
6:08
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