Code Snippets are a really handy feature in Visual Studio Code.
They can save you a few keystrokes,
which is nice, but they can also alleviate the need to memorize
lots of precise syntax.
VS Code comes with lots of built-in Snippets,
but also makes it straightforward to create your own for any
programming languages you use.
Let's see how to use built-in Snippets.
You can insert Snippets a couple of different ways.
The first I'll show you is with the command palette.
I'll search for snippet.
From this filtered list, I'll select "Insert Snippet."
Because I currently have a JavaScript file open,
I'm showing a list of JavaScript Snippets.
This list would be different if I were working in a different
programming language or file type.
From here, I can scroll through the list of Snippets for things
like functions, loops, and conditionals.
Selecting one will add it to my code file.
However, I'm going to cancel out of this and show you what I think
is the more common way to insert a Snippet.
Snippets also appear as part of the IntelliSense suggestions you
get while typing in an editor.
IntelliSense filters on their so-called trigger text.
It's the text that can be used to insert it into a file
and is usually closely related to the purpose of the Snippet.
For instance, I'll start typing the word "Function" and the
IntelliSense pop-up appears and filters the suggestions
based on that text.
I have several options here.
You can spot the ones that are Snippets by the square-looking
icon beside them.
The second item in this list is a Snippet
to insert a new JavaScript function.
You can insert the Snippet by either pressing enter
or the tab key.
Many Snippets have built-in placeholders you can tab through
to immediately fill in additional information that will be specific
to this bit of code.
This function, Snippet, has two placeholders,
one for the function name and one for the function parameters.
The first one is already highlighted,
making it easy for me to quickly type the name I want to
give the new function.
I'll name it countdown.
It will be a simple function that just counts down from
some provided value.
Once I've provided a value for that placeholder,
I can press the "Tab" key to move to the next one. That moves me to the
placeholder for the function parameters.
I'll give the function one parameter named "value" that will be
the starting value for the countdown.
Pressing "Tab" again moves my cursor inside the body of the function,
where I can now begin to write whatever code I need.
Let's quickly implement this function with another built-in
JavaScript Snippet.
I want to use a while loop to perform the countdown,
so I'll start to type the word "While."
The second item in the IntelliSense list has the
square icon next to it,
so I know that's the Snippet I'm looking for.
I'll select it and press the "Tab" key. That inserts the syntax
for a basic while loop.
There's only one placeholder for this Snippet,
and it's for the condition I want to use to test if the loop
should continue running.
I'll have it continue if value is greater than or equal to zero.
I'll press "Tab" again and my cursor is moved into the body
of the loop.
Here, I'll just use a console.log statement to output
the current value.
On the next line, I'll decrement the value.
That's all I need for this basic function.
That was very fast, but I hope you can see the value
of using Snippets when they're available.
I type less code, which means I made fewer typos and
entered the code more quickly.
I also didn't have to think about and remember things like where to
put the curly braces or parentheses.
The Snippet took care of those things for me.
Using the built-in Snippets for a language are great,
but you can also create your own for either repetitive
or complex code
you want to be able to quickly add to your projects.
I'll show you how to do that next.