Visual Studio Code: code snippets

Found this (admittedly staring me in the face right now… but it wasn’t a while back, I’m sure)

So looking in VSCode:

So lest I make a mess of it, quick back up of the text:

// 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, ${id} and ${id:label} and ${1:label} for variables. Variables with the same id are connected.
// Example:
"Print to console": {
"prefix": "log",
"body": [
"description": "Log output to console"

Then add a simple property snippet, using a slightly different shortcut than [prop], as that automatically gets picked up, I’ll find out how another time.

You don’t need to restart VSCode to get this working. It updates on the fly. The ONE thing this lacks right now is the ReSharper type macro language that is very useful for doing the private backing field/public property thing (I know what I mean 🙂 )

"Simple Property by Dennis": {
"prefix": "propdennis",
"body": [
"public ${type:string} ${name} {get;set;}"
"description": "Create a Dennis simple property"

In fact I will show you exactly what I mean...

My standards say that a private variable starts with an underscore followed by a lower case character, as shown above. However, the best that I can achieve with this snippet manager, with the minimum number of keystrokes, is this, because unlike ReSharper, there is no macro language or mechanism to achieve the above, so I get this:


And this is how you achieve the immediately above anyway:


In the docs, they talk about using $1 etc to represent tab-stops, but that doesn’t work for me, and they have not included a working example. This is good enough:

"Simple Property by Dennis": {
"prefix": "propWithBacker",
"body": [
"\t\tprivate ${type:string} _${name};\n",
"\t\tpublic ${type:string} ${name} {",
"\t\t\tget {",
"\t\t\t\treturn _${name};",
"\t\t\tset { ",
"\t\t\t\t_${name} = ${name};",
"description": "Create a property with backing field"

Hm, actually you don’t need that string of tabs. The snippet placement is sensitive to the position of your cursor, so this will do:

"Simple Property by Dennis": {
"prefix": "propWithBacker",
"body": [
"private ${type:string} _${name};\n",
"public ${type:string} ${name} {",
"\tget {",
"\t\treturn _${name};",
"\tset { ",
"\t\t_${name} = ${name};",
"description": "Create a property with backing field"

May 2016...
I didn't want to start a new page, but this is a good starting set of Angular and BootStrap er things, to get started (in Emmet and VSC - this goes in the html.json page)

 "Basic HTML boilerplate": {
 "prefix": "BasicHtml",
 "body": [
 "<!DOCTYPE html>",
 "\t\t<title>From the snippets location in Visual Studio Code</title>",
 "\t\t<meta charset=\"utf-8\">",
 "\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
 "\t\t<link rel=\"stylesheet\" href=\"\"></link>",
 "\t\t<input type=\"button\" value=\"Press me\" id=\"BasicHtmlPressMeId\">",
 "\t\t<input type=\"text\" value=\"Press mex\" id=\"BasicHtmlCapacityId\">",
 "<!-- -->",
 "<!-- Location is [file:///e:/sandbox/javascript/test.html] -->"
 "description": "A basic snippet of HTML"
 "BSButtons": {
 "prefix": "B01",
 "body": [
“, “\t

A bunch of big Bootstrap buttons

“, ”

“, “<p>”, “\t<button type=\”button\” class=\”btn btn-lg btn-default\”>Default</button>”, “\t<button type=\”button\” class=\”btn btn-lg btn-primary\”>Primary</button>”, “\t<button type=\”button\” class=\”btn btn-lg btn-success\”>Success</button>”, “\t<button type=\”button\” class=\”btn btn-lg btn-info\”>Info</button>”, “\t<button type=\”button\” class=\”btn btn-lg btn-warning\”>Warning</button>”, “\t<button type=\”button\” class=\”btn btn-lg btn-danger\”>Danger</button>”, “</p>” ], “description”: “Initial bootstrap buttons” }, “Ang01”: { “prefix”: “Ang01”, “body”: [ “\t” ], “description”: “Angular CDN” }, “BSScriptTags”: { “prefix”: “BSScript”, “body”: [ “\t\t“, “\t\t<link rel=\”stylesheet\” href=\”\”></link>”, “\t\t” ], “description”: “The Bootstrap src, css and jquery bits” } }


Visual Studio: code snippets

As at work we might stop using ReSharper, I’ll assume that and come back to how you do Code Snippets, Visual Studio-style.

There’s this from MSDN which shows you how to create one.

This is how you can use it of course: you start to type letters and after some pre-defined pause it assumes you want to see the snippet library, in this case for all snippets starting with [p]:


Where has this come from?



Now interesting here is that e.g. the [propa] and [propdp] snippets are not in that list, so presumably it at least aggregates from a few different sources under the [C:\Program Files (x86)\Microsoft Visual Studio 14.0] area. So if I do try to find e.g. propdp,


, which expands to this promising code:VSSnippets04

I need to know the location and extension of a snippet, so from the Manager, I can get the location, giving this:


Notice that [Snippets] is below [VC#], rather than the other way round, which seems a bit mad to me. Regardless,I now know where to look for the propdp snippet:

C:\Program Files (x86)\Microsoft Visual Studio 14.0\VC#\Snippets\1033\NetFX30



So that too is under the VC# umbrella, so maybe it is just grouping the C# bits together.

More MSDN [List of common C# snippets (.e.g. for properties)] [Create a New Snippet with Replacements] [Distribute Code Snippets]

Now my pet rant on C# code snippets vs ReSharper was the fact that you can’t do any on-the-fly substitution (see my YouTube elsewhere on what I mean by that) on macro variables. Fine, with a few extra keystrokes, you can achieve the necessary with the standard snippet [propfull]:

PropFull01 PropFull02

and in simple uses, this is probably enough (propg):


Might be helpful to show what underpins the fuller one, propfull:



Snippets: C# console app

If I want to play with some ideas in C# that don’t involve a GUI but where you want some console output, then that’s obviously a use-case for the Console Application template in Visual Studio… but it’s not quite as I like. THIS is as I like:



That then gives me a clear place in the RunTheTest method to new up stuff, and a ready-made prompt so the console doesn’t just run away after execution.

While I’m on it, this will save me a few keystrokes * 1000, as it’s easier to remove stuff doing this crude form of debugging than it is to add it. I always like to surround arguments in those square brackets for easy visual delimitation, better too many than too few:


Of course I should anyway go back to my Resharper Template notes here, and the related YouTube video here.

Editors: Visual Studio Code

One day, without recalling I had installed it, I saw I had Visual Studio Code on my box. It strikes me as a bit like Brackets, mentioned elsewhere in this blog.


and they also support Emmet:


My interest right now is in JavaScript, and while I’m at it snippets/templates to avoid typing more than I need to.

Some docs around this here, here and here.

Actually on snippets, it starts to get quite interesting – in Code, if you go File/Preferences/User Snippets, and then select HTML as the language, you get this:


So fairly self-documented. If I now remove the comments…


If in a piece of HTML, I now do ctrl-space to bring up the suggestions, this is what I see…


, and if I hit return I see this…


Hm, but in fact that is obviously JavaScript, so that is not a fat lot of help. But in fact it turns out that ALL the template files (e.g. for Docker as well, just as a random punt) have the same starting content.

So those templates anyway give us the principle, so let’s have a punt at that. I’ve hacked up this, which is the simplest possible HTML, but with a few variables thrown in, which get replaced at the point you use them (using ctrl-space to bring up the set):


If we now start out with a blank html page, thus…


, then do ctrl-space to get this…


, hit return to get this, with the cursor resting on ‘Title goes here’,


, start typing to replace that text, then hit tab to get to the next replacement (based on the $ variable you put in template), then you end up with this (but bear in mind because Emmet seems to be on by default, you can’t just press tab willy nilly)


These are the edits I used:


In Chrome with F12, you see this…


, which is fine in that a) the files don’t exist, but b) it has replaced the title with what I wanted. Also note that I have AutoSave on in Code, so upsides and downsides I guess, but it suits me.

And maybe finally, it is easy enough to escape double quotes: