Visual Studio custom snippet

This blog shows you how to create custom code snippets in Visual Studio.
Visual Studio custom snippet

Content

  1 Intro
  2 Base syntax
  3 PauseForWriting snippet
  4 Property snippet
  5 Import to Visual Studio
  6 How to invoke snippet
    Links

Intro

We're going to create two snippet's, one for a pattern used to wait for input in JavaScript and one for a new Property in a C# file. We name them PauseForWriting.snippet and Property.snippet.

Base syntax

This is the basic syntax of a snippet file. Go through the different sections before we create new snippets.
This show different section of a snippet file.
1
<CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
2
    <Header>
3
        <Title>A name for your snippet</Title>
4
        <Author>Your name</Author>
5
        <Shortcut>key combo</Shortcut>
6
        <Description>Snippet description</Description>
7
        <SnippetTypes>
8
            <SnippetType>Expansion</SnippetType>
9
        </SnippetTypes>
10
        <Keywords>
11
            <Keyword>..</Keyword>
12
        </Keywords>
13
    </Header>
14
    <Snippet>
15
        <Declarations>
16
        </Declarations>
17
        <Code Language="JavaScript/csharp..."><![CDATA[ ]]>
18
        </Code>
19
    </Snippet>
20
</CodeSnippet>
                            
<CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
    <Header>
        <Title>A name for your snippet</Title>
        <Author>Your name</Author>
        <Shortcut>key combo</Shortcut>
        <Description>Snippet description</Description>
        <SnippetTypes>
            <SnippetType>Expansion</SnippetType>
        </SnippetTypes>
        <Keywords>
            <Keyword>..</Keyword>
        </Keywords>
    </Header>
    <Snippet>
        <Declarations>
        </Declarations>
        <Code Language="JavaScript/csharp..."><![CDATA[ ]]>
        </Code>
    </Snippet>
</CodeSnippet>
                            
                        

PauseForWriting snippet

The snippet will create a new function for waiting for a user to stop typing.
First we create the Header section
1
<Header>
2
	<Title>Pause for writing</Title>
3
	<Author>Your name</Author>
4
	<Shortcut>pause</Shortcut>
5
	<Description>Simple pause while typing pattern</Description>
6
	<SnippetTypes>
7
		<SnippetType>Expansion</SnippetType>
8
	</SnippetTypes>
9
	<Keywords>
10
		<Keyword>JS</Keyword>
11
		<Keyword>JavaScript</Keyword>
12
		<Keyword>Writing</Keyword>
13
		<Keyword>Pause for writing</Keyword>
14
	</Keywords>
15
</Header>
                            
<Header>
	<Title>Pause for writing</Title>
	<Author>Your name</Author>
	<Shortcut>pause</Shortcut>
	<Description>Simple pause while typing pattern</Description>
	<SnippetTypes>
		<SnippetType>Expansion</SnippetType>
	</SnippetTypes>
	<Keywords>
		<Keyword>JS</Keyword>
		<Keyword>JavaScript</Keyword>
		<Keyword>Writing</Keyword>
		<Keyword>Pause for writing</Keyword>
	</Keywords>
</Header>
                            
                        
We then define the Declarations section wich defines different input variables.
1
<Declarations>
2
  <Literal>
3
    <ID>Name</ID>
4
    <ToolTip>Function name</ToolTip>
5
    <Default>search</Default>
6
  </Literal>
7
  <Literal>
8
    <ID>TagName</ID>
9
    <ToolTip>Name of input controller</ToolTip>
10
    <Default>txtSearch</Default>
11
  </Literal>
12
  <Literal>
13
    <ID>TimerName</ID>
14
    <ToolTip>Name of timer variable</ToolTip>
15
    <Default>pauseTimer</Default>
16
  </Literal>
17
  <Literal>
18
    <ID>PauseDuration</ID>
19
    <ToolTip>Duration to wait before executing function</ToolTip>
20
    <Default>800</Default>
21
  </Literal>
22
</Declarations>
                            
<Declarations>
  <Literal>
    <ID>Name</ID>
    <ToolTip>Function name</ToolTip>
    <Default>search</Default>
  </Literal>
  <Literal>
    <ID>TagName</ID>
    <ToolTip>Name of input controller</ToolTip>
    <Default>txtSearch</Default>
  </Literal>
  <Literal>
    <ID>TimerName</ID>
    <ToolTip>Name of timer variable</ToolTip>
    <Default>pauseTimer</Default>
  </Literal>
  <Literal>
    <ID>PauseDuration</ID>
    <ToolTip>Duration to wait before executing function</ToolTip>
    <Default>800</Default>
  </Literal>
</Declarations>
                            
                        
This defines 4 input variables which we then use in generation of our code.
Now we can add the actual code with the syntax.
1
<Code Language="JavaScript">
2
	<![CDATA[var _$TimerName$;
3
4
const $Name$ = () => {
5
clearTimeout(_$TimerName$);  
6
7
_$TimerName$ = setTimeout(() => {
8
	let val = document.getElementById("$TagName$").value;
9
10
	// do
11
	// your
12
	// work
13
}, $PauseDuration$);
14
};
15
16
document.getElementById("$TagName$").addEventListener("keyup", $Name$);
17
]]>
18
</Code>
                            
<Code Language="JavaScript">
	<![CDATA[var _$TimerName$;

const $Name$ = () => {
clearTimeout(_$TimerName$);  

_$TimerName$ = setTimeout(() => {
	let val = document.getElementById("$TagName$").value;

	// do
	// your
	// work
}, $PauseDuration$);
};

document.getElementById("$TagName$").addEventListener("keyup", $Name$);
]]>
</Code>
                            
                        
Code Language="JavaScript" defines which language the snippet should be available for, in this case JavaScript.
This is the finished syntax, ready to be imported into Visual Studio.
1
<CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
2
	<Header>
3
		<Title>Pause for writing</Title>
4
		<Author>Your name</Author>
5
		<Shortcut>pause</Shortcut>
6
		<Description>Simple pause while typing pattern</Description>
7
		<SnippetTypes>
8
			<SnippetType>Expansion</SnippetType>
9
		</SnippetTypes>
10
		<Keywords>
11
			<Keyword>JS</Keyword>
12
			<Keyword>JavaScript</Keyword>
13
			<Keyword>Writing</Keyword>
14
			<Keyword>Pause for writing</Keyword>
15
		</Keywords>
16
	</Header>
17
	<Snippet>
18
		<Declarations>
19
			<Literal>
20
				<ID>Name</ID>
21
				<ToolTip>Function name</ToolTip>
22
				<Default>search</Default>
23
			</Literal>
24
			<Literal>
25
				<ID>TagName</ID>
26
				<ToolTip>Name of input controller</ToolTip>
27
				<Default>txtSearch</Default>
28
			</Literal>
29
			<Literal>
30
				<ID>TimerName</ID>
31
				<ToolTip>Name of timer variable</ToolTip>
32
				<Default>pauseTimer</Default>
33
			</Literal>
34
			<Literal>
35
				<ID>PauseDuration</ID>
36
				<ToolTip>Duration to wait before executing function</ToolTip>
37
				<Default>800</Default>
38
			</Literal>
39
		</Declarations>
40
	<Code Language="JavaScript">
41
		<![CDATA[var _$TimerName$;
42
43
	const $Name$ = () => {
44
	clearTimeout(_$TimerName$);  
45
46
	_$TimerName$ = setTimeout(() => {
47
		let val = document.getElementById("$TagName$").value;
48
49
		// do
50
		// your
51
		// work
52
	}, $PauseDuration$);
53
	};
54
55
	document.getElementById("$TagName$").addEventListener("keyup", $Name$);
56
	]]>
57
	</Code>
58
	</Snippet>
59
</CodeSnippet>
                            
<CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
	<Header>
		<Title>Pause for writing</Title>
		<Author>Your name</Author>
		<Shortcut>pause</Shortcut>
		<Description>Simple pause while typing pattern</Description>
		<SnippetTypes>
			<SnippetType>Expansion</SnippetType>
		</SnippetTypes>
		<Keywords>
			<Keyword>JS</Keyword>
			<Keyword>JavaScript</Keyword>
			<Keyword>Writing</Keyword>
			<Keyword>Pause for writing</Keyword>
		</Keywords>
	</Header>
	<Snippet>
		<Declarations>
			<Literal>
				<ID>Name</ID>
				<ToolTip>Function name</ToolTip>
				<Default>search</Default>
			</Literal>
			<Literal>
				<ID>TagName</ID>
				<ToolTip>Name of input controller</ToolTip>
				<Default>txtSearch</Default>
			</Literal>
			<Literal>
				<ID>TimerName</ID>
				<ToolTip>Name of timer variable</ToolTip>
				<Default>pauseTimer</Default>
			</Literal>
			<Literal>
				<ID>PauseDuration</ID>
				<ToolTip>Duration to wait before executing function</ToolTip>
				<Default>800</Default>
			</Literal>
		</Declarations>
	<Code Language="JavaScript">
		<![CDATA[var _$TimerName$;

	const $Name$ = () => {
	clearTimeout(_$TimerName$);  

	_$TimerName$ = setTimeout(() => {
		let val = document.getElementById("$TagName$").value;

		// do
		// your
		// work
	}, $PauseDuration$);
	};

	document.getElementById("$TagName$").addEventListener("keyup", $Name$);
	]]>
	</Code>
	</Snippet>
</CodeSnippet>
                            
                        
When used, this is the code thats generated by the snippet.
1
var _pauseTimer;
2
3
const search = () => {
4
    clearTimeout(_pauseTimer);
5
6
    _pauseTimer = setTimeout(() => {
7
        let val = document.getElementById("txtSearch").value;
8
9
        // do
10
        // your
11
        // work
12
    }, 800);
13
};
14
15
document.getElementById("txtSearch").addEventListener("keyup", search);
16
                            
var _pauseTimer;

const search = () => {
    clearTimeout(_pauseTimer);

    _pauseTimer = setTimeout(() => {
        let val = document.getElementById("txtSearch").value;

        // do
        // your
        // work
    }, 800);
};

document.getElementById("txtSearch").addEventListener("keyup", search);

                            
                        
Here we use all the default input values.

Property snippet

The snippet creates a class property with variables for type and name, used for C# classes.
Here we define the Header section.
1
<Header>
2
  <SnippetTypes>
3
    <SnippetType>Expansion</SnippetType>
4
  </SnippetTypes>
5
  <Title>CSharp Class Property</Title>
6
  <Author>Your name</Author>
7
  <Description>
8
    Creates a class property with configurable type and name
9
  </Description>
10
  <Shortcut>property</Shortcut>
11
  <Keywords>
12
    <Keyword>C#</Keyword>
13
    <Keyword>Class</Keyword>
14
    <Keyword>Member</Keyword>
15
  </Keywords>
16
</Header>
                            
<Header>
  <SnippetTypes>
    <SnippetType>Expansion</SnippetType>
  </SnippetTypes>
  <Title>CSharp Class Property</Title>
  <Author>Your name</Author>
  <Description>
    Creates a class property with configurable type and name
  </Description>
  <Shortcut>property</Shortcut>
  <Keywords>
    <Keyword>C#</Keyword>
    <Keyword>Class</Keyword>
    <Keyword>Member</Keyword>
  </Keywords>
</Header>
                            
                        
Let's define the input variables in the Declarations section.
1
<Declarations>
2
  <Literal Editable="true">
3
    <ID>Type</ID>
4
    <ToolTip>Return type</ToolTip>
5
    <Default>string</Default>
6
  </Literal>
7
  <Literal Editable="true">
8
    <ID>Name</ID>
9
    <ToolTip>Name of the property</ToolTip>
10
    <Default>MyProperty</Default>
11
  </Literal>
12
</Declarations>
                            
<Declarations>
  <Literal Editable="true">
    <ID>Type</ID>
    <ToolTip>Return type</ToolTip>
    <Default>string</Default>
  </Literal>
  <Literal Editable="true">
    <ID>Name</ID>
    <ToolTip>Name of the property</ToolTip>
    <Default>MyProperty</Default>
  </Literal>
</Declarations>
                            
                        
We define variables for return type and name.
The Code section is pretty simple and straight forward.
1
<Code Language="csharp" Delimiter="$"><![CDATA[public $Type$ $Name$ { get; set; }
2
      
3
$end$]]></Code>
                            
<Code Language="csharp" Delimiter="$"><![CDATA[public $Type$ $Name$ { get; set; }
      
$end$]]></Code>
                            
                        
The $end$ element let's you define where to continue after generating code.
When everything is added, this is the finished code.
1
<?xml version="1.0" encoding="utf-8"?>
2
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
3
  <CodeSnippet Format="1.0.0">
4
    <Header>
5
      <SnippetTypes>
6
        <SnippetType>Expansion</SnippetType>
7
      </SnippetTypes>
8
      <Title>CSharp Class Property</Title>
9
      <Author>Your name</Author>
10
      <Description>
11
        Creates a class property with configurable type and name
12
      </Description>
13
      <Shortcut>property</Shortcut>
14
      <Keywords>
15
        <Keyword>C#</Keyword>
16
        <Keyword>Class</Keyword>
17
        <Keyword>Member</Keyword>
18
      </Keywords>
19
    </Header>
20
    <Snippet>
21
    <Declarations>
22
      <Literal Editable="true">
23
        <ID>Type</ID>
24
        <ToolTip>Return type</ToolTip>
25
        <Default>string</Default>
26
      </Literal>
27
      <Literal Editable="true">
28
        <ID>Name</ID>
29
        <ToolTip>Name of the property</ToolTip>
30
        <Default>MyProperty</Default>
31
      </Literal>
32
    </Declarations>
33
      <Code Language="csharp" Delimiter="$"><![CDATA[public $Type$ $Name$ { get; set; }
34
      
35
$end$]]></Code>
36
    </Snippet>
37
  </CodeSnippet>
38
</CodeSnippets>
39
                            
<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <CodeSnippet Format="1.0.0">
    <Header>
      <SnippetTypes>
        <SnippetType>Expansion</SnippetType>
      </SnippetTypes>
      <Title>CSharp Class Property</Title>
      <Author>Your name</Author>
      <Description>
        Creates a class property with configurable type and name
      </Description>
      <Shortcut>property</Shortcut>
      <Keywords>
        <Keyword>C#</Keyword>
        <Keyword>Class</Keyword>
        <Keyword>Member</Keyword>
      </Keywords>
    </Header>
    <Snippet>
    <Declarations>
      <Literal Editable="true">
        <ID>Type</ID>
        <ToolTip>Return type</ToolTip>
        <Default>string</Default>
      </Literal>
      <Literal Editable="true">
        <ID>Name</ID>
        <ToolTip>Name of the property</ToolTip>
        <Default>MyProperty</Default>
      </Literal>
    </Declarations>
      <Code Language="csharp" Delimiter="$"><![CDATA[public $Type$ $Name$ { get; set; }
      
$end$]]></Code>
    </Snippet>
  </CodeSnippet>
</CodeSnippets>

                            
                        
This is the generated code after invoking the snippet.
1
public string MyProperty { get; set; }
                            
public string MyProperty { get; set; }
                            
                        
This is what you get with default input values.

Import to Visual Studio

Now we need to import our snippet's to Visual Studio, follow these step's.
Step 1: Open Code Snippets Manager
Press Ctrl+k+b

Code snippets manager

Set Language to JavaScript.
Click Import (Alt+i) and select your newly created PauseForWriting.snippet file.
If you have multiple snippet's press Add (Alt+a) and select the snippes folder.

Import snippets

Click Finish. Press Overwrite if your have imported it before.

How to invoke snippet

To invoke a snippet is fairly simple.
Write snippet shortcut
Just start to write the snippet Shortcut and IntelliSense will display the full name, then press Tab twice and tab through the input variables. When finished press Enter.

Invoke snippet

Invoke snippet

Comments

Name