Let's create our snippets on VSCode

Hello, my friend today I'm gonna show you how to create your snippet on VSCode to improve your productivity.
First of all, we need to understand what are "Code snippets"

Code snippets are templates that make it easier to enter repeating code patterns. Or generate a boilerplate template for you by typing a keyword
e.a if you typing clg and hit tab or enter to confirm using a snippet then it will generate console.log() immediately

Why do we need to create our snippets?

Because of the snippets, we need sometimes they don't exist on Built-in Software or in the Marketplace. I decided to try to create, I found that it was easy to create. So I want to share this with you.

How to create Snippets on VSCode

1. Open Command Pallet and type Preferences: Configure User Snippets ( Shortcuts => Window: Ctrl + Shift + P, Mac: CMD + Shift + P )

1. We can select which file we want to add our snippet to. Today we gonna add to the javascript file.

Example of our javascript snippet

{
    "Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log to the console"
    }
}

I'll explain what happens shows above. This snippet will generate 'console.log()' as you can see they have a JSON format.

• the first line is the key of snippet
• a prefix is a snippet keyword to trigger
• the body is boilerplate we need, we can add a spacebar easily or write multiple lines.
• a description is a description of the snippet. It will describe which snippet we going to use e. a Log to the console will be shown on the right-hand side.

When the snippet was successfully called the editor cursor will place inside a round bracket it will reduce our effort to move the cursor by ourselves. This is called Tabstops one of Snippet Syntax.

Snippet Syntax

• Tabstops: a Tabstops is moving the cursor inside generated snippet code. A Tabstops is using by type $ following by number 1, 2, 3, ... and so on the last number is 0. We can use the same number to edit multiple lines.
• Placeholder: a placeholder is a default value inside a generated snippet. A placeholder is using by typing ${} and a Tabstops number with semicolon and placeholder value like this ${1:placeholderValue}

        "body": [
            "const $1: ${2:string} = $3",
            "$0"
        ],

in the Tabstops two if we want 'string' we just skip this Tabstops by hit Tab. So this is the benefit of placeholder.

• Choice: a choice is an option when we use inside a generated snippet

        "body": [
            "const $1: ${2|string, number, boolean|} = $3",
            "$0"
        ],

• Variables: variables are built-in values to use inside a generated snippet. It using by type $VARIABLES_NAME on a snippet body.

        "body": [
            "const $1: ${2|string, number, boolean|} = $RANDOM",
            "$0"
        ],

Available variables on VSCode following this link

Summary

Pros

• Reduce time to implement repetition code Good code style because code come from the same template snippet

Cons

• Code snippet can be duplicate on multiple files such as Built-in, Marketplace, or our snippets. It takes time for writing good snippets for you because you need to refactor a snippet to fit in your situation.

Limitation

• Code snippets cannot use when we're in the snippet editing process

Bonus

  These are some of the javascript snippets I'm using on my project.

First is generate an arrow function with a return value
"Create Arrow Function":{
      "prefix":"cf",
      "body":[
         "const $1 = (($2) => {",
         "",
         "\t $0",
         "\treturn",
         "})"
      ],
      "description":"Create Arrow function"
    },

The other snippet generates an arrow function without a return value

"Create Arrow Function without return": {
      "prefix":"cfn",
      "body":[
         "const $1 = (($2) => {",
         "",
         "\t $0",
         "})"
      ],
      "description":"Create Arrow function without return"
    },

This is my first writing blog in English. I want to apologize if make you guys confusing in this post with my gramma. I will improve my English skills. Please let me know your thoughts comments below, I'm glad to receive any suggestions. See you in the next post. : )