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’.

How to show full file path in Visual Studio Code

  1. Select File > Preference > Settings

    Visual Studio Code SettingsVisual Studio Code Settings
  2. Click on WORKSPACE SETTINGS

    Visual Studio Code Workspace SettingsVisual Studio Code Workspace Settings
  3. Type window.title into the search bar

    Visual Studio Code Window TitleVisual Studio Code Window Title
  4. Click on the pencil tool and select Copy to Settings

    Visual Studio Code Copy To SettingsVisual Studio Code Copy To Settings
  5. Set the title to ${dirty}${activeEditorLong}

    Visual Studio Code Set TitleVisual Studio Code Set Title
  6. That’s it! For additional options, please visit https://code.visualstudio.com/updates/v1_10#_configurable-window-title

Note: My personal favorite window.title setting is “${dirty}${rootName}${separator}${activeEditorMedium}”