Share snippets with your team in VS Code

Code snippets are templates that make entering repeating code patterns easier. Visual Studio Code has this feature from the very beginning (before 1.0). If you haven’t given it a try yet, you may want to read our awesome guidance on Creating your Own Snippets first, it will just take your 5 minutes and you’ll love it.

Share Custom Snippets — The Old Way

Snippets in VS Code are defined in a JSON format and stored in a per user (languageId).json file (similar to your User Setting file). If you want to share your awesome code snippets with your team, or even the community with ease, you need create a snippet extension and publish it to VS Code marketplace.

It’s easy and straightforward to make Snippet Extension and we already have more than 400 snippet extensions out there.

However last December, our rock star Johannes made a huge improvement to Code Completion Provider, with which extensions can insert dynamically generated snippets to the editor at runtime. It means you can actually store your snippets wherever you want: user space, share folder, web server, or even inside projects.

To demonstrate that, I create this tiny extension Project Snippets to provide you the ability of Project/Workspace Level Snippet.

Project/Workspace Level Snippet

With this extension, you can put the snippets in your code project, just like the way you share editor/lint/debugging/etc configurations with others working on the same project.

Take VSCodeVim as example, we have a bunch of test cases and they are all in the same shape:

To make writing tests less boring (I mean more fun), I created a snippet to help me insert common codes

{
  "newTest": {
    "prefix": "newTest",
    "body": [
      "newTest({",
      "\ttitle: \"${1}\",",
      "\tstart: \"${2}\",",
      "\tkeyPressed: \"${3}\",",
      "\tend: \"${4}\"",
      "});"
    ],
    "description": "Create a new test"
  }
}

Now finally I can move this single-use-case snippet out of my personal snippet file and put it into VSCodeVim’s project snippet folder .vscode/snippets/**.json . Then every contributor can benefit from it and IMHO it may increase our test coverage somehow.

Conclusion

I tried really hard to come up with any drawback of sharing snippets in projects and finally I got one: everyone has to install an extension: Project Snippets.