1
00:00:01,109 --> 00:00:04,538
Visual Studio Code comes with some
pretty cool stuff right out of the box,

2
00:00:04,538 --> 00:00:06,710
meaning without installing anything extra.

3
00:00:06,710 --> 00:00:10,143
One of my favorite built-in
features is called Emmet.

4
00:00:10,143 --> 00:00:14,994
Emmet allows you to write HTML and
CSS lightning fast using a shorthand.

5
00:00:14,994 --> 00:00:17,311
Here's a quick example of what it can do.

6
00:00:17,311 --> 00:00:20,556
Say I needed to create
an unordered list with a class,

7
00:00:20,556 --> 00:00:24,450
and that unordered list needed
to contain three list items, and

8
00:00:24,450 --> 00:00:27,642
each of those list items
needed to contain an image.

9
00:00:27,642 --> 00:00:28,832
That's a lot of typing.

10
00:00:28,832 --> 00:00:33,591
But with Emmet you can type
the shorthand ul.my-list which is

11
00:00:33,591 --> 00:00:38,527
what I am naming the class that's
gonna go on the unordered list,

12
00:00:38,527 --> 00:00:42,240
and inside that we'll
have list items times 3.

13
00:00:42,240 --> 00:00:44,530
And inside those list items image.

14
00:00:46,580 --> 00:00:50,720
Now I can press Tab, and
all of that code appears like magic.

15
00:00:50,720 --> 00:00:53,138
It's an amazing time saver and
a lot of fun.

16
00:00:53,138 --> 00:00:55,303
See the teacher's notes for
more about Emmet.

17
00:00:55,303 --> 00:00:58,826
VS code includes many
other handy shortcuts.

18
00:00:58,826 --> 00:01:02,855
One of the keyboard shortcuts
I use the most is Shift+Tab.

19
00:01:02,855 --> 00:01:06,059
This allows you to tab your
entire code block backwards.

20
00:01:06,059 --> 00:01:10,044
Especially handy for when your
code is starting to get messy and

21
00:01:10,044 --> 00:01:11,858
you need to clean it up a bit.

22
00:01:11,858 --> 00:01:15,903
To that I can simply highlight the code
that I want to tab backwards and

23
00:01:15,903 --> 00:01:18,904
Shift+Tab, and
the whole thing goes backwards,

24
00:01:18,904 --> 00:01:21,020
and the whole thing goes forwards.

25
00:01:22,550 --> 00:01:26,410
By the way, don't worry about memorizing
any of the keyboard shortcuts that we

26
00:01:26,410 --> 00:01:28,100
discuss in this video.

27
00:01:28,100 --> 00:01:32,080
I'll include them all along with other
resources in a resources guide at the end

28
00:01:32,080 --> 00:01:33,380
of the course.

29
00:01:33,380 --> 00:01:38,132
Another of my favorite shortcuts is
the ability to comment out multiple lines

30
00:01:38,132 --> 00:01:38,724
of code.

31
00:01:38,724 --> 00:01:41,926
You can highlight what
you wanna comment out and

32
00:01:41,926 --> 00:01:45,377
use the keyboard shortcut
Command forward slash.

33
00:01:45,377 --> 00:01:49,647
VS Code knows how to correctly common
out the code based on the type of file

34
00:01:49,647 --> 00:01:50,421
you're in.

35
00:01:50,421 --> 00:01:53,810
As you can see, it works for
JavaScript too.

36
00:01:57,557 --> 00:02:02,422
To uncomment highlight and
use Command forward slash again.

37
00:02:02,422 --> 00:02:07,728
Another useful feature is the ability to
select and change multiple items at once.

38
00:02:07,728 --> 00:02:12,495
Say I wanted to select these image
elements and change them to anchor tags.

39
00:02:14,590 --> 00:02:16,670
I can highlight the first one,

40
00:02:16,670 --> 00:02:22,120
then hit Command D until I've selected
each element I want to do something with.

41
00:02:22,120 --> 00:02:24,652
See how they highlighted one by one?

42
00:02:24,652 --> 00:02:28,755
Now I can change all the image
tags I've selected to anchor tags.

43
00:02:28,755 --> 00:02:33,501
The shortcut Shift Command L
highlights every element on the page.

44
00:02:33,501 --> 00:02:38,982
Let's use it to change all of
the source attributes to hrefs.

45
00:02:38,982 --> 00:02:42,326
Click on the first source attribute and

46
00:02:42,326 --> 00:02:46,082
then Shift Command L
to highlight them all,

47
00:02:46,082 --> 00:02:50,358
and then we can change
them to hrefs all at once.

48
00:02:50,358 --> 00:02:56,478
We can also use this feature to
get rid of all of these alt tags

49
00:03:01,614 --> 00:03:03,629
at the same time.

50
00:03:03,629 --> 00:03:07,254
The find and replace feature comes
in handy quite a bit, as well.

51
00:03:07,254 --> 00:03:09,319
Say I have a large style sheet, and

52
00:03:09,319 --> 00:03:12,604
I wanna find all of the CSS
rules related to the header.

53
00:03:12,604 --> 00:03:14,933
I can press Ctrl + F on Windows or

54
00:03:14,933 --> 00:03:19,000
Cmd + F on a Mac to bring up the find and
replace options.

55
00:03:20,230 --> 00:03:24,630
I can search for whatever I'm looking for
and the results will be highlighted.

56
00:03:24,630 --> 00:03:28,980
I can rotate through the instances found
by clicking these left and right arrows.

57
00:03:30,500 --> 00:03:31,420
And if I wanna find and

58
00:03:31,420 --> 00:03:35,700
replace, I can click this arrow
to open the replace option.

59
00:03:36,790 --> 00:03:41,052
And I can replace the instance I have
chosen by typing a new word in the box and

60
00:03:41,052 --> 00:03:42,011
hitting Enter.

61
00:03:44,902 --> 00:03:46,954
And it changed over here.

62
00:03:46,954 --> 00:03:51,787
You can search through your whole
project by pressing Ctrl+Shift+F on your

63
00:03:51,787 --> 00:03:54,030
windows or Cmd+Shift+F on a Mac.

64
00:03:54,030 --> 00:03:59,141
VS Code will show you a list to the left
of all the instances of your search term.

65
00:03:59,141 --> 00:04:03,448
You can click on the one you want,
and it will take you to that file.

66
00:04:03,448 --> 00:04:07,693
When you are finished, click the explorer
icon and the find pane will go away.

67
00:04:11,270 --> 00:04:14,623
VS Code also has some handy
autocomplete features.

68
00:04:14,623 --> 00:04:17,862
If I wanted to link a style
sheet to my HTML file for

69
00:04:17,862 --> 00:04:22,773
example, I could go to the head of my
HTML document and start typing link.

70
00:04:26,100 --> 00:04:29,845
As I type,
you'll see a list of options pops up.

71
00:04:29,845 --> 00:04:35,706
If I type link and press Tab,
VS Code will auto-complete a link for

72
00:04:35,706 --> 00:04:41,682
me, and all I have to do is add the path
of my style sheet to this href.

73
00:04:44,001 --> 00:04:47,342
Auto-complete also works for
HTML elements.

74
00:04:47,342 --> 00:04:53,390
If I wanted an image tag for
example, I can type img then Tab,

75
00:04:53,390 --> 00:04:57,197
and it autocompletes that tab for me.

76
00:04:57,197 --> 00:05:02,007
VS code will also close any of my
HTML tags automatically if I type

77
00:05:02,007 --> 00:05:04,336
the tag name with no brackets.

78
00:05:06,329 --> 00:05:10,505
When you're writing CSS, VS Code will
suggest possible properties as you type.

79
00:05:14,611 --> 00:05:19,501
When it suggests background, I can
press Enter to accept the suggestion,

80
00:05:19,501 --> 00:05:22,148
or select another option from the list.

81
00:05:22,148 --> 00:05:23,471
And as you can see, for

82
00:05:23,471 --> 00:05:27,720
the background value it's suggesting
background color choices to me,

83
00:05:27,720 --> 00:05:32,123
based on the other color choices used
in this file, which is pretty handy.

84
00:05:32,123 --> 00:05:36,921
VS Code can also help you
out in JavaScript files.

85
00:05:36,921 --> 00:05:39,023
Here I've defined a function.

86
00:05:39,023 --> 00:05:42,775
If I wanna call that function I
can start typing its name, and

87
00:05:42,775 --> 00:05:45,840
VS Code will suggest that function.

88
00:05:45,840 --> 00:05:48,564
I can press tab or enter to autocomplete.

89
00:05:48,564 --> 00:05:51,789
This VS Code feature is
called IntelliSense, and

90
00:05:51,789 --> 00:05:57,106
it is normally associated with an IDE,
or Integrated Development Environment,

91
00:05:57,106 --> 00:06:01,193
which you can think of as a super powered
text editor that comes with all sorts

92
00:06:01,193 --> 00:06:03,010
of debugging and automation tools.

93
00:06:03,010 --> 00:06:03,926
In other words,

94
00:06:03,926 --> 00:06:08,187
VS Code comes with many more features
than a traditional simple text editor.

95
00:06:08,187 --> 00:06:11,470
See teacher's notes for
more about VS Code IntelliSense.