A tool for managing VS Code code snippets

#vscode #productivity #code #snippet

When you realized you have typed some codes 100 times, you should save it as a code snippet. For example, I made a snippet for hapi route, when I type hapi:route it will trigger intellisense and then generate the router boilerplate code for me.

https://dev-to-uploads.s3.amazonaws.com/i/u1zwukev53co6g3pnlma.gif

It hard to write and maintain the VS Code code snippet because the code snippet was in a JSON file. So I wrote a tool to generate this JSON file for me, and I need only write the snippets in a folder.

The tool

The tool called snp (which means snippet). You can install it by curl:

$ curl -sf https://gobinaries.com/djyde/snp | sh

It is written in Go so it can run on many platforms, include Windows.

Create your snippets

You can create a folder to organize all your code snippets now:

$ mkdir snippets
$ cd snippets

Then you can create a file with .snp extension. The file name would become the trigger text.

For example, I want to write a hapi route snippet, now I
create a hapi:route.snp file:

$ touch hapi:route.snp

// hapi:route.snp
---
scope: typescript,javascript
description: hapi route
---

server.route({
  path: '$1',
  method: '${2|GET,POST,PUT,DELETE|}',
  async handler(req, h) {
    $0
  }
})

As you can see, .snp file is just a file that contains a front matter and the code snippet.

If you are not familiar about the VS Code code snippet syntax, please see https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax

Run snp -u, now go to VS Code and type hapi:route, you will see the magic:

Conclusion

You can now use snp to manage your VS Code NATIVE code snippets, instead of using some code snippet manager apps that only help you copy and paste.

See more on https://github.com/djyde/snp

my personal snippets: https://github.com/djyde/snippets