Preview
Video Player
00:00
00:00
Useful Text Editor Shortcuts and Tools
6:12Learn about some of VS Code's most useful out-of-the-box tools, such as autocomplete features and find and replace.
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