You've already seen how helpful VS Code's built-in code
Snippets can be.
You can get the same benefits with any code by creating
your own Snippets.
This can be a great way to speed up the writing of code that is
specific to your company, project, or just patterns you
personally use a lot.
You can create your own Snippets by opening the command palette
and searching for Snippet.
Select "Configure User Snippets."
That brings up another list where you specify which Snippets
file to use.
Most Snippets are going to be language-specific and stored in a
file with other Snippets for that language.
That's how VS Code determines which Snippets to show you
while you're typing code.
If you're working in a JavaScript file,
for instance, it doesn't make much sense to show you Snippets
for Python.
If you did want a particular Snippet available everywhere,
you could choose the option to create a new global Snippets file.
I'm working in a JavaScript file right now,
so I'm going to choose the JavaScript option,
which stores Snippets in a file named JavaScript.JSON.
As the name of this file suggests, Snippets are stored
in JSON format.
Describing the details of JSON is beyond the scope of this course,
but I think you'll be able to follow along and quickly implement
your own Snippets.
This file doesn't currently contain any Snippets,
but it does have a brief comment describing the syntax and an
example we can use to get started.
I think it's easiest to create a new Snippet by copying
an existing one.
So I'm first going to select and copy the example here that
starts on Line 8.
I'll paste it inside the closing curly brace at the
end of the file
and then make sure the whole thing is properly indented.
Let's quickly step through what each line here represents and make
some changes to it along the way.
As it exists currently, this Snippet will add a call to
the JavaScript console.log function and position the cursor
inside a string parameter being passed to the function.
Let's update it to log the value of a variable to the console
and also log the name of the code file containing that variable.
The text on Line 18 is just the name of the Snippet.
I'm going to update that to log variable to console.
After the name, is a colon and an opening curly brace.
That's followed by several properties and values that define
what the Snippet does.
The prefix property specifies the trigger text for the Snippet.
That's the text you type in an editor to invoke it.
I'll change that to logvar for this Snippet.
The value for the body property is an array.
Each element in the array is a line of code that you want
inserted in your code file.
These lines of code can make use of a few types of special
variables.
The lines already here use dollar sign one and dollar sign two.
Those are put where cursor placeholders should appear so you
can quickly type values after inserting the Snippet.
Those aren't the only special variables you can use.
I'm going to have the first line of my Snippet
log the name of the code file where it appears.
The variable TM file name will be replaced with the code file
name when the Snippet is inserted.
There are lots of other similar variables you can use
in your Snippets, but I'll refer you to the VS Code
documentation for the full list.
Notice that each line of code added to this body array is a
string that is surrounded by double quotes.
Because elements in an array are separated by commas,
there's also a comma at the end of each line.
I'm going to replace the second line here
and instead have an output of variable name and its value.
The first $1
is the first placeholder.
The cursor will be positioned there after the Snippet
is inserted,
so I can type the name of the variable I want to log.
Since the second placeholder is also $1,
whatever I type for the first one will also appear there.
That's the only place I want to insert a value,
but I'll add the $0 placeholder on the next line,
since that's where I want the cursor to appear after I input a
value for the first placeholder.
It seems counterintuitive to use $0 for the
last placeholder,
but that's how it works.
The description property at the end is just that, a place to write
a brief description of your Snippet that will appear in the
IntelliSense help for it.
I'll change this one to say "Log variable value to console."
Okay. I'm now ready to go back to my JavaScript file and try it out.
At the end of the file, I'll first just declare a new
variable named address and assign it a value.
Just below that, I'll insert the new code Snippet.
Remember, the trigger text for it is logvar.
I'll start typing that and you can see it appears in the list
presented by IntelliSense.
I'll highlight it, and the description I added
in the preview of the code appear in the popup to the right.
I'll press the "Tab" key to insert it.
Notice that the first line of code in the Snippet replace the special
file name variable with the name of this code file, menus.js.
Also, my cursor is positioned at the first placeholder
so I can type the name of the variable I want to log.
I'll type address.
Because I used the $1 placeholder in two places,
typing the address variable name fills it in
in both places I need it at the same time.
Pressing "Tab" again moves my cursor to the final placeholder
on the next line
so I can resume typing my next lines of code.
Creating your own Snippets is a great way to speed up the
insertion of those small bits of code you use a lot,
but aren't included among the built-in Snippets.
I hope you'll give them a try.
Now that you've seen lots of ways to write and edit code,
let's turn our attention to safely storing that code in a source
code repository.
Up next, I'll show you how VS Code integrates with Git.