How to create user snippet (code template) in Visual Studio Code

User snippets are templates that make it easier to enter repeating code patterns in Visual Studio Code.

For example, in a .html document, when you type h1 and press ENTER, it will be replaced by <h1></h1> automatically.

Follow the instructions below to define your own user snippet.

  1. Under the File menu, select Preferences, then User Snippets

    Visual Studio Code User SnippetsVisual Studio Code User Snippets
  2. Select or type in the file type you wish to add the snippet to

    Visual Studio Code User Snippets File TypeVisual Studio Code User Snippets File Type
  3. Enter title of snippet, prefix, body and description. Below is an example of adding stg as a shortcut to <strong></strong>.

        {
          "strong tag": {
            "prefix": "stg",
            "body": [
              "<strong>${1}</strong>"
            ],
            "description": "<strong></strong>"
          }
        }
        
  4. The settings above are stored in a file on your computer, which can be copied to another computer if desired.

    If you do not know where the file is located, enable full path name and the path will be shown in the title bar of Visual Studio Code.

Sample User Snippets

t-html for .html file

t-vue for .vue file

For detail information on how to configure user snippet, here is the link to the official Visual Studio Code site on ‘Creating your own Snippets’.