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

Visual Studio的強大功能是眾所皆知的,從它安裝的容量就看的出來,除了支援多種語言之外,限量認為很棒的部分在於它強大的IntelliSenseIntelliSense就是當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 SnippetsIntelliSense一樣能夠節省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 SnippetsXML格式的文件,副檔名為.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









留言

張貼留言