Three ways to use user defined vscode snippets

What are code snippets?

Code snippets are templates that make entering repeated code patterns, such as loops or conditional statements,  easier.

Types of snippets

• Built-in snippets 
•  Vscode has built-in snippets for number of languages like PHP, Javascript, Typescript etc.
• Snippets available on market place 
•  There custom snippets averrable on marketplace for specific frameworks / languages and platforms as well. For example snippets for VUE, Laravel etc.
• User defined snippets 
• You can defined your own snippets, It's called user defined snippets. You can create snippets according to your need using the snippet templates.

Ways you can use user defined snippets

You can use snippets in several way. Like generating fixed static code or generating code with placeholders according to your need.

Snippet for fixed static code 

You can create a snippet to insert the fixed static code, which is fixed but you need to add that in several places. You can use snippet in this case.

For example, You need to add copyright in every page footer. 

<p> Copyright @ 2020 </p>

You can create a snippet for it like,

"Add copyright text": {
  "prefix": "copyright",
  "body": [
    "<p> Copyright @ 2020 </p>"
  ],
  "description": "Add copyright text"
}

Snippet as template with placeholders

You can create a snippet for the repetitive code block have changes in some fixed attributes. 

For example,  Form Input of of bootstrap. In this case you just need to change the Label and type of text.

<div class="mb-3"> 
    <label for="exampleFormControlInput1" 
          class="form-label"
    >
          Email address
    </label> 
    <input type="email" 
     class="form-control" 
     id="exampleFormControlInput1" 
     placeholder="name@example.com"
    > 
</div>
In the above code block, Things that will be changed per block is,
Label value
Label for value
Input type
Id of input
and Placeholder value

We can create template for form-input like this,

"Form input block": {
  "prefix": "form-input",
  "body": [
    "<div class=\"mb-3\"> ",
    "    <label for=\"$2\" ",
    "          class=\"form-label\"",
    "    >",
    "          $1",
    "    </label> ",
    "    <input type=\"$3\" ",
    "     class=\"form-control\" ",
    "     id=\"$2\" ",
    "     placeholder=\"$4\"",
    "    > ",
    "</div>$0"
  ],
  "description": "Form input block"
}

Here, $1, $2, $3, $4 and $0 are tab-indexed placeholders. Number after $ shows the tab index. Like $1 means first tab. $2 means second tab and so on. $0 is alway last.

Note, I'm using $2 for label for  and id of the input both, as both will be sharing the same value. So It will write on the both places using multi cursor.  Cool, Right!

Snippet as Modifiers / Generator

Suppose you have a javascript code where you are following code convention like this,

For any [variable Name] error checking code is invalid[variable Name].

E.g For Name, validation function is invalidVariable()

1. var Name=""
2. 
   
3. invalidName() {
4.       return _.get(this.errors, "Name[0]");
5. }

In this case, We can create a snippet we can generate invalid[Variable Name] function for us. This kind of snippet can be created using a special built-in variable  provided by vscode. ${TM_SELECTED_TEXT}

Snippet will look like this,

"validation error check function": {
  "prefix": "invalid-feedback-function",
  "body": [
    "invalid${TM_SELECTED_TEXT}() {",
    "      return _.get(this.errors, \"${TM_SELECTED_TEXT}[0]\");",
    "    },"
  ],
  "description": "validation error check function"
}

${TM_SELECTED_TEXT} takes the code currently selected as input.

You can create more complex and useful snippets according to your need. Check the official link to the vscode user-defined snippets to find out what other built-in variables are available to create snippets.

Here is the link to official  documentation for vscode  user defined snippes:
https://code.visualstudio.com/docs/editor/userdefinedsnippets