Instructor: First, we'll open up the command palette, and then type user snippets and choose the option configure user snippets.
First, let's just uncommon the given example and play around with it. Let's move into the index.js file and type log. You can see that it says log, print to console. That's fine.
You can see that inaudible gives a small snippet over here. It says, "Logout, put the console." Here, it says, "It's a user snippet." It's also suggesting a possible output, that is console.log.
If you press tab in this position, you can see that it expands into console.log and it will place the cursor right at this position. Now, you can write whatever you want. This is the output.
If you remember, the description is exactly this print output to console. If you remember, it also had print to console. The important part of the snippet is obviously the body.
Whenever you press tab, this is the text that will be replacing the prefix that you have typed. That means when you type log and then press tab, this is the text that will be replacing the prefix.
If you'll see, that is the exact same console.log, but it has this $1. This $1 declares that where the first cursor should start. $2 means that when you press the tab after you're done with whatever you want to write in this position, once you're done and pressed the tab, this is the next position the cursor should move to.
Let's write our own snippet to declare a function. We'll do declare function, and then we'll start with the prefix. We'll just give it fn as a prefix. For the description, we'll do declare a function, which is pretty straightforward.
For the body, we'll start with a simple string. Let's first write function, and then $1 for the function's name. This is will be the placeholder, and then $2 will be the second position for passing in variables into the function, and the $3 will provide the body of the function.
Now, you can see, after the function, we have $1. That means the first cursor will be at $1 so that we can enter our function name, and $2 will give us the ability to enter the variable names, and $3, the body of the function.
Let's move to the index.js file to test this. We'll write fn, and as soon as you write fn, inaudible gives you the suggestion for the snippet. The description is just what is written. It's also showing the expanded version.
As soon as you press enter or tab, you can see that it's expanded, and here you can write your function's name. Let's just name it function name. For the variables, just write var1, and for the body, we'll just do a return statement.
We'll modify our snippet into a multi-lane snippet using the add a notation. We'll pass in two other strings. For the last string, we'll give it the closing curly braces. For the second string, we'll move the $3 symbol into the second string.
We'll also add in default values for the placeholders by using the curly braces and giving a colon symbol in between the default name and the cursor position number.
As you can see, we've given function name to the first cursor position and var1 to the second cursor position. There was a mistake and we are changing this to 3 now. Let's test this in the index.js file. Let's go there and write fn again and wait for the suggestion.
As you can see, the suggestion pop up. Now, it shows default values. That is the function name and var1. Now, if you press tab, you can see that it expands to the expected result, and the tab flow is still the same. You get to the first function name and then to the variables, and then into the body of the function.
Once everything is complete, you'll get outside the snippet.