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!

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)
}

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.

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.

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.

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.

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

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

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.

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.

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.

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.