DEV Community

Cover image for Create Your Own VSCode Snippets
Brian Morrison II
Brian Morrison II

Posted on

Create Your Own VSCode Snippets

Snippets in VSCode are such a huge time saver. Whenever I am creating a file for a React application, all I have to do is type in rfce into my text editor to get a nicely constructed functional React component named exactly what the file. More recently, I’ve been creating a lot of AWS Lambda Functions with Go and wanted to do something similar as the structure of almost every Go Lambda is identical to start. This lead to the discovery of a plugin called Snippet Generator, which I’ll show you exactly how to use in this article.

Installation

Before we can use the plugin, we first need to install it. Open VSCode, head to Extensions, and type in Snippet Generator. You’re looking for the one by Wenfang Du. Once you find it, simply click install and you are ready to start creating your own snippets!

https://cdn.brianmorrison.me/media/2022/158d3e2f-6106-40a4-a58b-8e75a326f366

Creating a Snippet

Snippet Generator works by highlighting some code and using it as the base for what you wnt to create. I’m going to run with the example I lead with, creating a simple Lambda Function in Go. So I’ve created a new file in VSCode and pasted the following code. This essentially gets me a basic Lambda function in Go that can handle any of the common HTTP methods using the LambdaRouter struct from my utils library.

package main

import (
    "github.com/aws/aws-lambda-go/events"
    "github.com/aws/aws-lambda-go/lambda"
    utils "github.com/bmorrisondev/go-utils"
)

func main() {
    router := utils.LambdaRouter{
        Get: Get,
    }

    lambda.Start(router.Handler)
}

func Get(request events.APIGatewayProxyRequest) (events.APIGatewayProxyResponse, error) {
    return utils.OkResponse(nil)
} 
Enter fullscreen mode Exit fullscreen mode

So I’ll highlight this code, open the command palette in VSCode by using Ctrl + Shift + P (Cmd + Shift + P on a Mac), and run Generate Snippet.

https://cdn.brianmorrison.me/media/2022/31e5cc60-568f-49fc-b2de-1627a2c1a31b

There are a few things the plugin will ask us for, starting with the Name. This will be displayed in the intellisense box that shows up when we are typing.

https://cdn.brianmorrison.me/media/2022/ac43bb52-95fa-4899-8efa-aa1faea354fe

Next it will ask for the scope. This is optional, but you can type in the language or project you are working with to help VSCode only show it where you want to. Skip this if you are unsure what to put.

https://cdn.brianmorrison.me/media/2022/3a53dea4-dd68-4159-9f10-a5d024881fd9

Next it will ask for the shortcut we want to use to generate the snippet. Keep this one in mind as its what you'll need to remember to use the snippet.

https://cdn.brianmorrison.me/media/2022/80746e8a-512a-4171-b401-b9df5a8a0da1

Finally, feel free to enter a description if you like.

https://cdn.brianmorrison.me/media/2022/22a2ad5c-3b78-41db-b366-106e2c225182

Once you are done, you should get a message in the lower right saying that the snippet was added to your clipboard.

https://cdn.brianmorrison.me/media/2022/a7029ba6-3751-4eb8-b942-8bd66ac970e8

Now open your user-defined snippets by opening the command palette again and searching for Configure User Snippets. If you don’t have a file defined already, VSCode will ask you if you want to make one. I have one so I’ll open it here.

https://cdn.brianmorrison.me/media/2022/bbaa4b28-6adb-4a39-8142-21652f5495e2

If its a new file, you should see some generic helper text commented out. If not, it’s simply a JSON map used to store snippets.

https://cdn.brianmorrison.me/media/2022/13b92476-fc11-482b-a42f-f2889b3e51cc

Remove all the comments and paste in your snippet. Make sure there are still a set of curly brackets surrounding the snippets though, don’t delete them with the comments. If you followed along, your file should like like this.

https://cdn.brianmorrison.me/media/2022/af5255a7-c0c7-43f9-af4f-e2b21a43b49f

Using Your Snippet

Honestly there isn’t much to this one, simply create a new file and start typing in that command you entered earlier (go-lambda in this case). VSCode should start listing out snippets that match what you are typing, hit enter once yours is selected and your file will be pre-populated with the snippet we created earlier!

And there you have it! A super easy way to save yourself a BUNCH of time if you ever get into the business of creating the same kind of files over and over.

Top comments (0)