Snippet Guide

The contributes.snippets Contribution Point allows you to bundle snippets into a Visual Studio Code extension for sharing.

The Creating snippets topic contains all information for creating snippets. This guide / sample just shows how you can turn your own snippets into an extension for sharing. The suggested workflow is:

  • Create and test your snippets using Preferences: Configure User Snippets command
  • Once you are happy with the snippets, copy the whole JSON file into an extension folder, such as snippets.json
  • Add the following snippet contribution to your package.json
  1. {
  2.   "contributes": {
  3.     "snippets": [
  4.       {
  5.         "language": "javascript",
  6.         "path": "./snippets.json"
  7.       }
  8.     ]
  9.   }
  10. }

You can find the complete source code at: https://github.com/microsoft/vscode-extension-samples/tree/master/snippet-sample.

Tip: Tag your extension as a snippet extension with the following config in your package.json:

  1. {
  2.   "categories": ["Snippets"]
  3. }

Using TextMate snippets

You can also add TextMate snippets (.tmSnippets) to your VS Code installation using the yo code extension generator. The generator has an option New Code Snippets which lets you point to a folder containing multiple .tmSnippets files and they will be packaged into a VS Code snippet extension. The generator also supports Sublime snippets (.sublime-snippets).

The final generator output has two files: an extension manifest package.json which has metadata to integrate the snippets into VS Code and a snippets.json file which includes the snippets converted to the VS Code snippet format.

  1. .
  2. ├── snippets                    // VS Code integration
  3. │   └── snippets.json           // The JSON file w/ the snippets
  4. └── package.json                // extension's manifest

Copy the generated snippets folder to a new folder under your .vscode/extensions folder and restart VS Code.