Using Code Snippets in Visual Studio

Using Code Snippets in Visual Studio

In this article we are going to see how to add markup to a webpage by using HTML code snippets. There is a feature called "HTML code snippets" in Visual Studio 2010 that can be used to save time and reduce typing when you create web page markup in Source view.

What is a code snippet?
Code snippets consist of prewritten programming code or markup. It is a quick way to insert the code.

How a Code Snippet works?
In some cases, snippets contain place holders for information (Ex: a property name) that you can specify after you have inserted the code snippet.

Where to write the Code Snippet?
We can use the Code Snippets in the
1. Code Editor when we are writing programming code.

2.Source View of the HTML editor when we are creating a Web Page.

For Example, To insert an ASP.NET button control, type

Following are the ways to insert code snippets:

•Position the cursor where you want the inserted code snippet to appear, right-click the page, and then select Insert Snippet.
•Position the cursor where you want the inserted code snippet to appear, and then press the keyboard shortcut CTRL+K, CTRL+X. This displays a list that allows you to select a snippet.
•Select a word that you want to surround using a code snippet, and then right-click the word and click Surround With.
•From the Edit menu, select IntelliSense, and then select Insert Snippet.
Code Snippets Manager:

In order to see what code snippets are available or to add snippets, we can use the Code Snippets Manager.
Adding HTML snippet to a Web Page:

1.Open Visual Studio
2.In the File Menu, select New Project. In the New Project dialog box, Under Installed Templates, select Visual C# -> Web and then select ASP.NET Web Application.
3.In the Name field type, SnippetsDemo then click ok.
4.This creates a new Web Application Project in Visual Studio.

5.Let us see how to insert HTML snippets into Markup.
.Open the Default.aspx page, Switch to Source view and position the cursor in the div tag.
.Type The drop-down list shows element names and snippets. HTML elements are indicated by an icon of a yellow box that displays angle brackets.
.Snippets are indicated by an icon of a sheet of paper.
.Press TAB twice.
The markup for a Button control appears and the Text property value is highlighted.
.Hit enter twice and go to the next line. Right click and select Insert Snippet.
.Double-click the HTML snippet folder. Select br and press tab.
.Press ENTER to go to the next line.
.Position the cursor at the start of the line and press the keyboard shortcut CTRL+K, CTRL+X.
This displays the snippet folder list.
.Double-click the ASP.NET snippet folder.
.Type la and press TAB.
The markup for a Label control appears and the Text property value is highlighted.


To run the page press Ctrl +F5
This shows how HTML code snippets can be added to your Visual Studio 2010 project.

Visual Studio includes more than 200 code snippets for C#, XML, VB, HTML.