1
00:00:00,380 --> 00:00:04,102
You've already seen how helpful VS Code's built-in code

2
00:00:04,102 --> 00:00:05,225
Snippets can be.

3
00:00:05,225 --> 00:00:08,734
You can get the same benefits with any code by creating

4
00:00:08,734 --> 00:00:09,904
your own Snippets.

5
00:00:09,904 --> 00:00:13,619
This can be a great way to speed up the writing of code that is

6
00:00:13,619 --> 00:00:16,856
specific to your company, project, or just patterns you

7
00:00:16,856 --> 00:00:18,114
personally use a lot.

8
00:00:18,114 --> 00:00:22,951
You can create your own Snippets by opening the command palette

9
00:00:22,951 --> 00:00:24,980
and searching for Snippet.

10
00:00:24,980 --> 00:00:29,743
Select "Configure User Snippets."

11
00:00:29,743 --> 00:00:33,962
That brings up another list where you specify which Snippets

12
00:00:33,962 --> 00:00:34,820
file to use.

13
00:00:34,820 --> 00:00:38,701
Most Snippets are going to be language-specific and stored in a

14
00:00:38,701 --> 00:00:41,330
file with other Snippets for that language.

15
00:00:41,330 --> 00:00:44,644
That's how VS Code determines which Snippets to show you

16
00:00:44,644 --> 00:00:46,151
while you're typing code.

17
00:00:46,151 --> 00:00:48,69
If you're working in a JavaScript file,

18
00:00:48,69 --> 00:00:51,740
for instance, it doesn't make much sense to show you Snippets

19
00:00:51,740 --> 00:00:52,413
for Python.

20
00:00:52,413 --> 00:00:55,792
If you did want a particular Snippet available everywhere,

21
00:00:55,792 --> 00:01:00,24
you could choose the option to create a new global Snippets file.

22
00:01:00,24 --> 00:01:03,466
I'm working in a JavaScript file right now,

23
00:01:03,466 --> 00:01:07,71
so I'm going to choose the JavaScript option,

24
00:01:07,71 --> 00:01:11,414
which stores Snippets in a file named JavaScript.JSON.

25
00:01:11,414 --> 00:01:15,549
As the name of this file suggests, Snippets are stored

26
00:01:15,549 --> 00:01:16,719
in JSON format.

27
00:01:16,719 --> 00:01:21,39
Describing the details of JSON is beyond the scope of this course,

28
00:01:21,39 --> 00:01:24,925
but I think you'll be able to follow along and quickly implement

29
00:01:24,925 --> 00:01:26,35
your own Snippets.

30
00:01:26,35 --> 00:01:29,112
This file doesn't currently contain any Snippets,

31
00:01:29,112 --> 00:01:33,353
but it does have a brief comment describing the syntax and an

32
00:01:33,353 --> 00:01:35,757
example we can use to get started.

33
00:01:35,757 --> 00:01:39,69
I think it's easiest to create a new Snippet by copying

34
00:01:39,69 --> 00:01:40,50
an existing one.

35
00:01:40,50 --> 00:01:45,906
So I'm first going to select and copy the example here that

36
00:01:45,906 --> 00:01:48,26
starts on Line 8.

37
00:01:48,26 --> 00:01:52,643
I'll paste it inside the closing curly brace at the

38
00:01:52,643 --> 00:01:54,120
end of the file

39
00:01:54,120 --> 00:02:02,106
and then make sure the whole thing is properly indented.

40
00:02:02,106 --> 00:02:07,793
Let's quickly step through what each line here represents and make

41
00:02:07,793 --> 00:02:10,680
some changes to it along the way.

42
00:02:10,680 --> 00:02:14,272
As it exists currently, this Snippet will add a call to

43
00:02:14,272 --> 00:02:18,130
the JavaScript console.log function and position the cursor

44
00:02:18,130 --> 00:02:21,722
inside a string parameter being passed to the function.

45
00:02:21,722 --> 00:02:25,977
Let's update it to log the value of a variable to the console

46
00:02:25,977 --> 00:02:30,420
and also log the name of the code file containing that variable.

47
00:02:30,420 --> 00:02:34,132
The text on Line 18 is just the name of the Snippet.

48
00:02:34,132 --> 00:02:40,968
I'm going to update that to log variable to console.

49
00:02:40,968 --> 00:02:46,510
After the name, is a colon and an opening curly brace.

50
00:02:46,510 --> 00:02:50,263
That's followed by several properties and values that define

51
00:02:50,263 --> 00:02:51,663
what the Snippet does.

52
00:02:51,663 --> 00:02:56,354
The prefix property specifies the trigger text for the Snippet.

53
00:02:56,354 --> 00:02:59,680
That's the text you type in an editor to invoke it.

54
00:02:59,680 --> 00:03:05,635
I'll change that to logvar for this Snippet.

55
00:03:05,635 --> 00:03:09,722
The value for the body property is an array.

56
00:03:09,722 --> 00:03:13,641
Each element in the array is a line of code that you want

57
00:03:13,641 --> 00:03:15,530
inserted in your code file.

58
00:03:15,530 --> 00:03:19,496
These lines of code can make use of a few types of special

59
00:03:19,496 --> 00:03:20,192
variables.

60
00:03:20,192 --> 00:03:24,593
The lines already here use dollar sign one and dollar sign two.

61
00:03:24,593 --> 00:03:28,448
Those are put where cursor placeholders should appear so you

62
00:03:28,448 --> 00:03:31,781
can quickly type values after inserting the Snippet.

63
00:03:31,781 --> 00:03:34,769
Those aren't the only special variables you can use.

64
00:03:34,769 --> 00:03:37,433
I'm going to have the first line of my Snippet

65
00:03:37,433 --> 00:03:49,675
log the name of the code file where it appears.

66
00:03:49,675 --> 00:03:56,69
The variable TM file name will be replaced with the code file

67
00:03:56,69 --> 00:03:59,576
name when the Snippet is inserted.

68
00:03:59,576 --> 00:04:02,549
There are lots of other similar variables you can use

69
00:04:02,549 --> 00:04:05,407
in your Snippets, but I'll refer you to the VS Code

70
00:04:05,407 --> 00:04:07,236
documentation for the full list.

71
00:04:07,236 --> 00:04:11,396
Notice that each line of code added to this body array is a

72
00:04:11,396 --> 00:04:14,409
string that is surrounded by double quotes.

73
00:04:14,409 --> 00:04:18,139
Because elements in an array are separated by commas,

74
00:04:18,139 --> 00:04:21,357
there's also a comma at the end of each line.

75
00:04:21,357 --> 00:04:23,866
I'm going to replace the second line here

76
00:04:23,866 --> 00:04:39,307
and instead have an output of variable name and its value.

77
00:04:39,307 --> 00:04:46,425
The first $1

78
00:04:46,425 --> 00:04:48,420
is the first placeholder.

79
00:04:48,420 --> 00:04:51,520
The cursor will be positioned there after the Snippet

80
00:04:51,520 --> 00:04:52,235
is inserted,

81
00:04:52,235 --> 00:04:55,40
so I can type the name of the variable I want to log.

82
00:04:55,40 --> 00:04:58,500
Since the second placeholder is also $1,

83
00:04:58,500 --> 00:05:02,145
whatever I type for the first one will also appear there.

84
00:05:02,145 --> 00:05:05,370
That's the only place I want to insert a value,

85
00:05:05,370 --> 00:05:09,360
but I'll add the $0 placeholder on the next line,

86
00:05:09,360 --> 00:05:16,220
since that's where I want the cursor to appear after I input a

87
00:05:16,220 --> 00:05:19,761
value for the first placeholder.

88
00:05:19,761 --> 00:05:23,900
It seems counterintuitive to use $0 for the

89
00:05:23,900 --> 00:05:25,280
last placeholder,

90
00:05:25,280 --> 00:05:27,190
but that's how it works.

91
00:05:27,190 --> 00:05:31,156
The description property at the end is just that, a place to write

92
00:05:31,156 --> 00:05:34,750
a brief description of your Snippet that will appear in the

93
00:05:34,750 --> 00:05:36,299
IntelliSense help for it.

94
00:05:36,299 --> 00:05:44,470
I'll change this one to say "Log variable value to console."

95
00:05:44,470 --> 00:05:53,27
Okay. I'm now ready to go back to my JavaScript file and try it out.

96
00:05:53,27 --> 00:05:59,433
At the end of the file, I'll first just declare a new

97
00:05:59,433 --> 00:06:04,854
variable named address and assign it a value.

98
00:06:04,854 --> 00:06:10,925
Just below that, I'll insert the new code Snippet.

99
00:06:10,925 --> 00:06:15,110
Remember, the trigger text for it is logvar.

100
00:06:15,110 --> 00:06:19,674
I'll start typing that and you can see it appears in the list

101
00:06:19,674 --> 00:06:21,652
presented by IntelliSense.

102
00:06:21,652 --> 00:06:24,430
I'll highlight it, and the description I added

103
00:06:24,430 --> 00:06:27,854
in the preview of the code appear in the popup to the right.

104
00:06:27,854 --> 00:06:30,390
I'll press the "Tab" key to insert it.

105
00:06:30,390 --> 00:06:35,83
Notice that the first line of code in the Snippet replace the special

106
00:06:35,83 --> 00:06:39,155
file name variable with the name of this code file, menus.js.

107
00:06:39,155 --> 00:06:43,511
Also, my cursor is positioned at the first placeholder

108
00:06:43,511 --> 00:06:46,505
so I can type the name of the variable I want to log.

109
00:06:46,505 --> 00:06:49,249
I'll type address.

110
00:06:49,249 --> 00:06:54,183
Because I used the $1 placeholder in two places,

111
00:06:54,183 --> 00:06:57,292
typing the address variable name fills it in

112
00:06:57,292 --> 00:07:00,01
in both places I need it at the same time.

113
00:07:00,01 --> 00:07:04,267
Pressing "Tab" again moves my cursor to the final placeholder

114
00:07:04,267 --> 00:07:05,517
on the next line

115
00:07:05,517 --> 00:07:08,989
so I can resume typing my next lines of code.

116
00:07:08,989 --> 00:07:12,945
Creating your own Snippets is a great way to speed up the

117
00:07:12,945 --> 00:07:16,547
insertion of those small bits of code you use a lot,

118
00:07:16,547 --> 00:07:19,867
but aren't included among the built-in Snippets.

119
00:07:19,867 --> 00:07:21,563
I hope you'll give them a try.

120
00:07:21,563 --> 00:07:25,405
Now that you've seen lots of ways to write and edit code,

121
00:07:25,405 --> 00:07:29,880
let's turn our attention to safely storing that code in a source

122
00:07:29,880 --> 00:07:31,16
code repository.

123
00:07:31,16 --> 00:07:35,00
Up next, I'll show you how VS Code integrates with Git.