Visual Studio - Code Snippets產生常用程式碼Template

Visual Studio的強大功能是眾所皆知的，從它安裝的容量就看的出來，除了支援多種語言之外，限量認為很棒的部分在於它強大的IntelliSense。IntelliSense就是當Programmer輸入相關的關鍵字時，VS會自動跳出可能符合的選項讓Programmer選擇，以加速開發。但這次要介紹的是有點類似IntelliSense的功能，Code Snippets。

Code Snippets是能讓Programmer透過輸入快捷鍵+Tab來產生常用的程式碼區段，例如：try...catch, if...else, class ClassName {}, for(int i = 0; i < length; i++) {}...等。為什麼需要Code Snippets呢?因為像上面這些常常用到的程式碼區段，每次都寫一次真是有夠麻煩的，所以用Code Snippets和IntelliSense一樣能夠節省Coding的時間，以下限量就列出幾個VS內建的Code Snippets快捷鍵：

if + tab鍵 + tab鍵

說明: 產生if condition block

Code:

if ( true )
{

}

for + tab鍵 + tab鍵

說明: 產生for迴圈區段

Code:

for ( int i = 0 ; i < length ; i++ )
{

}

while + tab鍵 + tab鍵

說明: 產生while迴圈區段

Code:

while ( true )
{

}

cw + tab鍵 + tab鍵

說明: 產生Console WriteLine

Code:

Console.WriteLine();

ctor + tab鍵 + tab鍵

說明: 產生該class的default constructor
Code:

public Program()
{

}

prop + tab鍵 + tab鍵

說明: 產生Property的語法

Code:

public int MyProperty { get; set; }

看完幾個VS簡單內建的Code Snippets後，一定會想要自己寫一個Code Snippets Template來產生自己要的程式碼區段，接下來就來教大家怎麼建立自己的Code Snippets。

Code Snippets是XML格式的文件，副檔名為.snippet，VS內建的snippet檔案都放在VS的安裝資料夾內(例如限量的C# snippet檔案是在C:\Program Files (x86)\Microsoft Visual Studio 14.0\VC#\Snippets\1033\Visual C#)，先來看看範例的C# if.snippet檔案：

<?xml version="1.0" encoding="utf-8" ?>
<CodeSnippets  xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
 <CodeSnippet Format="1.0.0">
  <Header>
   <Title>if</Title>
   <Shortcut>if</Shortcut>
   <Description>Code snippet for if statement</Description>
   <Author>Microsoft Corporation</Author>
   <SnippetTypes>
    <SnippetType>Expansion</SnippetType>
    <SnippetType>SurroundsWith</SnippetType>
   </SnippetTypes>
  </Header>
  <Snippet>
   <Declarations>
    <Literal
     <ID>expression</ID>
     <ToolTip>Expression to evaluate</ToolTip>
     <Default>true</Default>
    </Literal>
   </Declarations>
   <Code Language="csharp"><![CDATA[if ($expression$)
 {
  $selected$ $end$
 }]]>
   </Code>
  </Snippet>
 </CodeSnippet>
</CodeSnippets>

從上面的的範例可以大略看到整個Snippet格式的結構：

<CodeSnippets>
    <CodeSnippet>
        <Header>
            <Title>{Snippet名稱}</Title>
   <Author>{作者}</Author>
   <Description>{描述}</Description>
   <HelpUrl>{相關連結}</HelpUrl>
   <Keywords>
    <Keyword>{關鍵字}</Keyword>
   </Keywords>
   <Shortcut>{快捷鍵}</Shortcut>
        </Header>
        <Snippet>
            <Code Language="{程式語言}">
                <![CDATA[ {程式碼區段} ]]>
            </Code>
        </Snippet>
    </CodeSnippet>
</CodeSnippets>

其實如果要快速的撰寫Code Snippets可以透過安裝Snippet Designer，這樣就可以不用管XML格式的Tag和其他有的沒的格式，因為Snippet Designer已經將格式Parse成更容易撰寫的介面，以下是教大家如何使用Snippet Designer：

1. 首先打開VS(限量用的是Visual Studio 2015 Community)，到[Tools](工具) => [Extension and Updates](擴充功能和更新)，搜尋Snippet Designer點選安裝

2. 到[File](檔案) => [New](新增) => [File](檔案)，選擇建立Code Snippet類型檔案

3. 進入Code Snippet編輯頁面如下：

Snippet: Snippet檔案名稱
Language: 哪種程式語言的Snippet
Shortcut: Snippet快捷鍵關鍵字(輸入關鍵字後要按tab兩次才會出現程式碼Template)
Replacements: Template出現後會反白變數區域，提示Programmer此處可修改
ID: 變數名稱
Tooltip: 滑鼠移至該變數反白區會出現此變數的描述
Default to: 變數的預設值
Kind: Literal或Object，簡單來說Literal為該變數為文字型態。(Object詳細用法有機會再詳述)
Type: (目前無值)
Function: (Snippet提供了幾種Function可用，但一般簡單的Snippet不太會用到)

在編輯區域中加入想加入的程式碼與變數，記得，變數名稱前後要加入"$"，$end$符號則是代表插入Template後文字輸入游標會跑至$end$的位置。

4. 打開[Tools](工具) => [Code Snippets Manager](程式碼片段管理員)，選擇你要加入Snippet的程式語言資料夾，按下[Import]加入Snippet檔案

再來就來馬上看看成果，限量範例寫一個jQuery的Ajax Template，先建立一個測試用的js檔，然後輸入ajaxTemplate。

上圖可以看到輸入一定的字元後就會跑出剛剛加入的Snippet。

看完限量介紹完Code Snippet功能後是不是覺得Visual Studio真是深不可測，現在馬上事不宜遲趕快來練習看看吧。

參考來源：
MSDN - Code Snippets
Visual Studio Gallery - Snippet Designer

限量ㄟ蓋步

搜尋此網誌