DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
alternativeboy
alternativeboy

Posted on

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 )

Configure User Snippets

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

Select Snippet File

Example of our javascript snippet

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

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.

Snippet Description

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"
        ],
Enter fullscreen mode Exit fullscreen mode

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"
        ],
Enter fullscreen mode Exit fullscreen mode
  • 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"
        ],
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode
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"
    },
Enter fullscreen mode Exit fullscreen mode

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"
    },
Enter fullscreen mode Exit fullscreen mode

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. : )

Top comments (2)

Collapse
 
jumpa500 profile image
Idan Faibish

Thanks!
btw, this web app can actually help u generate snippets as u code!
snippet-generator.app

Collapse
 
alternativeboy profile image
alternativeboy Author

Nice web site for create snippet easy as you said, thx u bro : )

"I made 10x faster JSON.stringify() functions, even type safe"

โ˜๏ธ Must read for JS devs