Code Snippets in Visual Studio 2010

Visual Studio 2010 memberikan kemudahan untuk memasukkan block atau potongan code ke editor window. Hal ini sangat membantu kita ketika kita malas untuk melakukan coding secara manual dan berulang-ulang, kita dapat dengan mudah memasukan code yang kita butuhkan secara instan. Di VS2008 memasukkan code snippets sangat lah rumit dan kita bisa menggunakan aplikasi pihak ketiga untuk memudahkannya.

Pada VS2010 snippet memiliki dua jenis yakni Expansion Snippets yang dimasukkan pada posisi kursor dan SurroundsWith yang akan membungkus code yang ada. Secara default, VS2010 telah menyediakan code snippet, kita melihat snippet-snippet yang ada di C:\Users\<UserName>\Documents\Visual Studio 2010\Code Snippets\

Membuat Custom Snippet

1. Langkah pertama kita membuat XML File, simpan dengan nama favicon.snippet pastikan ekstensi filenya .snippet

2. Klik kanan, pilih Insert Snippet, pilih Snippet.

3.  Maka akan mengenerate code berikut.

   1: <CodeSnippet Format="1.0.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">

   2:   <Header>

   3:     <Title>title</Title>

   4:     <Author>author</Author>

   5:     <Shortcut>shortcut</Shortcut>

   6:     <Description>description</Description>

   7:     <SnippetTypes>

   8:       <SnippetType>SurroundsWith</SnippetType>

   9:       <SnippetType>Expansion</SnippetType>

  10:     </SnippetTypes>

  11:   </Header>

  12:   <Snippet>

  13:     <Declarations>

  14:       <Literal>

  15:         <ID>name</ID>

  16:         <Default>value</Default>

  17:       </Literal>

  18:     </Declarations>

  19:     <Code Language="XML">

  20:       <![CDATA[<test>

  21:       <name>$name$</name>

  22:       $selected$ $end$</test>]]>

  23:     </Code>

  24:   </Snippet>

  25: </CodeSnippet>

Delete tag <SnippetType>SurroundsWith</SnippetType> karena kita akan membuat snippet jenis Expansion.

4. Ganti Title menjadi "Favicon", Shortcut menjadi “faviconAdd" dan Description menjadi "Add favicon image".

5. Tag Literal memungkinkan kita untuk menentukan nilai-nilai yang dapat diedit . Pada snippet, saya ingin memungkinkan user untuk mengubah lokasi atau nama file favicon. Tag ID adalah nama dari nilai yang dapat diedit sehingga kita mengubahnya menjadi “favicon". Tag Default menentukan nilai default untuk bidang yang dapat diedit.

6. Terakhir kita ubah language-nya menjadi “HTML”.

   1: <Code Language="HTML">

   2:       <![CDATA[

   3:         <link rel="shortcut icon" href="$favicon$" />

   4:         ]]>

   5:     </Code>

Berikut snippet code nya.

   1: <?xml version="1.0" encoding="utf-8"?>

   2: <CodeSnippet Format="1.0.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">

   3:   <Header>

   4:     <Title>Favicon</Title>

   5:     <Author>Dani</Author>

   6:     <Shortcut>faviconAdd</Shortcut>

   7:     <Description>Add favicon image</Description>

   8:     <SnippetTypes>

   9:       <SnippetType>Expansion</SnippetType>

  10:     </SnippetTypes>

  11:   </Header>

  12:   <Snippet>

  13:     <Declarations>

  14:       <Literal>

  15:         <ID>Favicon</ID>

  16:         <Default>favicon.ico</Default>

  17:       </Literal>

  18:     </Declarations>

  19:     <Code Language="HTML">

  20:       <![CDATA[

  21:     <link rel="shortcut icon" href="$Favicon$" />

  22:       ]]>

  23:     </Code>

  24:   </Snippet>

  25: </CodeSnippet>

Load snippet ke VS

Untuk meload snippet, kita bisa menggunakan salah satu cara.

1. Copy favicon.snippet file yang ada pada C:\Users\<UserName>\Documents\Visual Studio 2010\Code Snippets\ ke folder snippet didalam Solution Project anda.

2.Cara kedua, anda klik menu Tools pilih Code Snippets Manager. Kemudian pilih Import.

Menggunakan Code Snippets

Anda dapat menggunakan Snippets Code dengan menekan Ctrl K + X atau klik kanan Insert Snippet.

Follow @danitaufani on twitter