Tools

Working with snippets in Visual Studio Code

Last night I started working on my new tech presentation which is going to consist mostly on live demos. Because of limited time (which is usually about 50 minutes) and few topics to discuss, I decided to use code snippets in my Visual Studio Code. Thanks to that, I’ll focus more on the „talk flow” rather than my typing which is not so good when I’m stressed.

 

Creating snippets in VSC

Let’s start with creating an example C# snippet just to present the way it works. To create one, open your VSC and got to Preferences -> User snippets. Next, choose a language (in my case it would be C#) and hit Enter. You’ll see the following JSON file generated:

 

{
/*
	// Place your snippets for C# here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"Print to console": {
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	}
*/
}

 

Note that the name of the JSON file is csharp.json. Based on the name VSC decides which snippets are available in the current file and which not, so those inside the above JSON will not be visible in TypeScript, Java etc. Let’s go back to the generated file. The JavaScript object consists of three properties:

  • prefix – a text which triggers a snippet
  • body – code generated by the snippet
  • description – well, it’s self-explained

My example snippet looks as follows:

 


{
	"Example1": {
		"prefix": "example1",
		"body": [
			"Console.WriteLine(\"Here's my VSC snippet!\");"
		],
		"description": "Example 1 description"
	}

}

 

Note that I had to escape double quarter marks to make it work. Let’s see that in action:

 

 

Voilà! Works like a charm.

 

Tab stops and placeholders

Here comes the cool part of VSC snippets. Inside the body of each one, you can put two different kinds of markers: tab stops and placeholders. Let’s start with the first one. I created another snippet which contains two tabs stops inside:

 


"Example2": {
		"prefix": "example2",
		"body": [
			"Console.WriteLine(\"Here's the first stop -->$1<-- \");", "", "Console.WriteLine(\"And the second one -->$2<-- \");"
		],
		"description": "Example 2 description"
	}

 

How does it work?

 

 

As you see I can navigate to the specific places in generated code by using Tab key. Next are placeholders and below is yet another snippet which uses them:

 


"Example3": {
		"prefix": "example3",
		"body": [
			"for(var ${1: index} = 0; ${1:index} < ${2: array}.Length; ++ ${1:index})",
			"\tConsole.WriteLine($\"The value of {${1:index}} equals {${2:array}[${1:index}]}\");"
		],
		"description": "Example 3 description"
	}

 

How does it work?

 

 

Placeholders allow you to put… placeholders inside your code. Changing one will change the others from the same „group”. You can navigate to the first placeholder from the next group by pressing the Tab key.

 

Creating VSC snippets per project

The snippets are great and really simple to use but there’s the thing – VSC offers to create code snippets per user, which means that they are shared across all your projects. Frankly, that’s not what I was expecting because I don’t want to trigger some snippet from my presentation by mistake in my other projects. Fortunately, there’s an extension which solves that problem.
Go to the Extensions tab and type „Project Snippets„. Install the extension and reload the VSC. Now, all you need to do to create „local snippets” is to create a folder named snippets inside .vscode folder. Next, create a JSON file with snippets but remember that the name of the file must be related to the programming language. If you’re not sure what’s the right name for the specific language, here you can find the official VSC languageIds. The example file structure for C# should look as follows:

 

 

The structure of the „local snippets” is the same, therefore I’ll not present it again. Hope, this post will be useful for some of you 😉

Don’t miss new posts!

If you enjoy reading my blog, follow me on Twitter or leave a like on Facebook. It costs nothing and will let you be up to date with new posts 🙂