Visual Studio Code : Snippets


This post explains how to add custom snippets in Visual Studio Code.Its always handy to use snippets when ever possible. Code snippets saves time and reduces syntax errors.I am using Prism.js in my blog for syntax highlighting. Code block insertion in prism is a pain when you have to specify line numbers and language class. So I decided to create a snippet instead of typing the code block all times. Given below is the code block syntax for prism,where language varies.

In order to add custom snippets in VSCode go to File -> Preferences - > User Snippets and select the file type where you want to add snippet. In this case I am using markdown. All snippets are in json file corresponding to file type. So in this case its markdown.json. I have added a new snippet for above code block insertion as shown below. ‘$’ represents tab numbers and it starts with 1.

So we start by giving a name for the snippet, in this case I gave the name ‘Prism Code Block’. Prefix is what we type to add snippet as part of auto complete. So in my case its ‘prism_block’ and body contains the actual code block to be inserted as part of snippet with place holders denoted by ‘$’.

Now you are ready to insert this snippet into your mark down files. Go to desired mark down and type ‘prism_’ and auto complete will insert the code block for you.

Coding is fun enjoy….