Code snippets

Code snippets are small, reusable source code or text templates that make it easier for a programmer to write repeating code patterns. Let's say you write a function to calculate the time it takes for a program to finish executing.

import time

def total_time():
    start_time = time.time()
    a = 1
    b = 2
    c = a + b
    print(c) #3

    end_time = time.time()
    total_time = end_time - start_time
    print("Time: ", total_time)

total_time()

And then along the line, you need to use this function repeatedly, can you imagine how tiring that would be?

Instead of writing this function, we can just make it a snippet and call it whenever we need to rewrite the function.

Built-in snippets

There are a lot of built-in snippets in VS code for so many languages such as Python, Ruby, JavaScript, Markdown, PHP etc.

To see the available snippets for a language in VS code, go to the command palette by pressing Ctrl+Shift+P and click on the Insert Snippet command

This also includes user snippets that you have defined and any snippets provided by extensions you have installed.

Create your own snippets

Now that we know what snippets are let us see how we can create our own snippets. You can easily create your own code snippets without the use of any extension. To do this, go to File > Preferences > User Snippets, and then choose the language you want your snippet to be in, or you can make it a global snippet for all languages.

After selecting a snippet language you should see a screen with this text being commented.

Select this part of the code and uncomment it

To give you something like this

Now on the line Print to console rename it to any name of your choice that you wish to name your snippet, Rename log to whatever name you want to use and call up our snippet when coding, Edit the content of the body to the code you want your snippet to show.

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

How about we do this

• change print to console to my snippet
• change log to console
• change body content to console.log('hurray we just created our first snippet on Javascript')
• save and exit

"my snippet": {
        "prefix": "console",
        "body": [
            "console.log('hurray we just created our first snippet on Javascript')"
        ],
        "description": "Log output to console"
    }

Now go to your Javascript file and type console, you will see that your snippet would appear and ready to be reused.

I hope you found this article helpful, if any questions please feel free to ask. Thanks for reading. Please like/share so that it reaches others as well.