Home < Blog < Tutorials < How to create personal snippets in VS Code

May 31, 2020

In the Tutorial we will create personal snippets that will help us to program quickly without worrying about syntax or details.

More than one person opens a downloaded VS Code Snippet extension, but why not create the ones that are most used by one?

It's very simple and we must do the following:

1) In VS Code's top menu choose File, then Preferences and finally choose User Snippets

2) In the middle of VS Code a list of options will be displayed, for the Tutorial we will select php.json

3) It will open the code fragment file php.json, as you will see there is an explanation and example that is commented in addition to some snippets that I have created.

4) The structure is very simple:

1	“General Title”:{
2	“prefix”:“NameShortForCall”,
3	“body”:[
4	"# $1"
5	],
6	“description”:“Short comment.”
7	}

I explain line by line below:

• Line 1 must be in double quotes and is the general title, followed by 2 dots (:) and the opening key.
• Line 2 corresponds to a short name, which when written in the code will appear in a list to which we can choose.
• From line 3 to 5 is the body that will appear in our code, in the example is for a comment with the # sign, and the $1 corresponds to the location of the cursor to start writing, there may be more than 1 that must be numbered from one, for example: # $1 $2 .
• Line 6 is about the short description of the snippet, it must be very short to be able to visualize it when calling the snippet.
• Finally line 7 is closed with '}', if we want to write another snippet we must add a COMA symbol (,)
  

4) For example the prefix is todoPHP, we write 'all' and a box will appear that shows the complete prefix of allPHP and you can see part of 'description'.

5) The structure that was written inside body will appear, notice that the cursor that is the vertical red line is to the right of the # symbol and in the $1 location:

Maybe the example seen is very simple, now you will see one that I use as a header of my PHP files to start writing documentation, it has 15 variables ($1...$15) and the goal is to document the logic of the file:

Well, I hope the Tutorial served you well. What snippet would you create?