Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Create your own snippets in Visual Studio Code


    In this lesson, we will take a look at the user snippets feature of Visual studio code to expedite our workflow.

    User snippets are also a great way to customize the editor to your liking and add custom snippets that you wished were there out-of-the-box.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    Instructor: First, we'll open up the command palette, and then type user snippets and choose the option configure user snippets.

    For this tutorial, I'll choose JavaScript as the language of choice. You can choose whichever you want. It comes with a pre-made example that teaches you how to make your own snippet.

    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.

    After this, if you press tab, you can see that it will move into this position. Now, if you go back to the JavaScript.json file, that is where the user snippet is declared, you can see that we have the prefix log. That means this is used to invoke the snippet.

    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.