# 介紹好用 Visual Studio 2010 擴充套件：Snippet Designer

在 Visual Studio 2010 之前的版本所支援的 Code Snippet 種類非常有限，只有在編輯 **C#**、**Visual Basic** 與 **XML** 時可以使用而已，但到了 Visual Studio 2010 又新增了 **JavaScript**、**HTML** 以及 **SQL** 語法等 Code Snippet 支援，在寫程式時就更加方便了，在這裡我必須要推薦這套 [Snippet Designer](https://github.com/mmanela/SnippetDesigner) 擴充套件，他能幫我們用更人性化的方式管理我們常用的或內建的 Code Snippet 程式碼片段。

你可以從 Visual Studio 2010 的擴充管理員進行套件安裝，開啟後點選 **線上圖庫** 分類，然後在右上角的搜尋文字框輸入 **Snippet Designer** 就可以查到 [Snippet Designer](https://github.com/mmanela/SnippetDesigner) 項目。

[![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/fad992581cd4dbda7d8a-SNAGHTML75d3eab_thumb.png)](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/30ad3b81de4d10bb0a31-SNAGHTML75d3eab.png)

要能活用這個 [Snippet Designer](https://github.com/mmanela/SnippetDesigner) 擴充套件，主要有兩個部分必須瞭解：

1.  管理現有的 Code Snippet
2.  快速建立自訂的 Code Snippet

**§ 管理現有的 Code Snippet**

安裝好 [Snippet Designer](https://github.com/mmanela/SnippetDesigner) 擴充套件並重開 Visual Studio 2010 之後可以從 \[檢視\] / \[其他視窗\] / \[Snippet Explorer\] 開啟 **Snippet Explorer** 視窗：（點圖可放大）

[![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/59761bf6416e57220ed0-image_thumb_57.png)](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/29c6aaaa140d6e3dbc9d-image_766.png)

開啟 Snippet Explorer 視窗後，可以發現有個文字搜尋框，還可以選擇你要搜尋哪幾種 Language (程式語言) 的 Code Snippet，當你僅勾選 HTML 語言並按下 Search 之後，你即可瀏覽在 HTML 編碼環境下所有可用的 Code Snippet，這些大部分都是 Visual Studio 2010 內建的 Code Snippet，當你選中如下圖的 **a** 這一項的時候，在下面的視窗會看到這個 Code Snippet 的詳細內容，其中標示**黃底色**的就是 Code Snippet 的 **代入變數** (Replacement)：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/8a461bb24cf7f37064f1-SNAGHTML76848c9.png) 

由於在 HTML 編輯環境下使用 Code Snippet 的方式比較特別，因此我在使用上特別多做說明，如上圖的 Code Snippet，我們直接開啟一份 HTML 文件來實驗一下，在 HTML 環境下使用 Code Snippet 都必須先輸入一個**小於符號** ( **<** ) 才會出現 Code Snippet 的選項，如下圖示：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/3c55fe65eccfea12ce5f-image_767.png)

這時當你輸入完 **<a** 之後按下一個 **Tab** 鍵就會輸出 Code Snippet 的內容，這時你再按下 **Tab** 鍵就會在不同的 **代入變數** (**Replacement**) 之間跳動並可輸入文字，最後按下 **Enter** 鍵完成輸入：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/d107d1c54c530e76d96a-image_768.png)

我們看看前面幾張圖的 **Snippet Explorer** 視窗的標號 4 的地方，這裡有個特殊的變數叫做 **$end$** 代表著當你按下 **Enter** 結束時鍵盤游標應該停留在哪個位置，其他的部分都是 **代入變數** (**Replacement**) 。

假設我們要將 **a** 這個 Code Snippet 修改成必須輸入一個 class 屬性才行，這時我們直接從 **Snippet Explorer** 視窗在 **a** 這個 Code Snippet 上用滑鼠左鍵點兩下即可開啟 [Snippet Designer](https://github.com/mmanela/SnippetDesigner) 內建的 Code Snippet 編輯器 (如下圖示)。

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/1063db63bdd7b3c5624f-image_769.png)

這時我們先將 Code Snippet 的內容內容修改成我們要新增上去的 class 屬性，class 屬性的內容給他一個暫時的變數名稱，假設我們設定為 classname，這時用滑鼠選取 classname 並按下滑鼠右鍵再點選 **Make Replacement** 即可將該名稱轉變成一個 Code Snippet 的 **代入變數** (Replacement)：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/5274ba5fe90fa13a0383-image_770.png)

設定好變數名稱之後建議可以修改 Tooltip 欄位的資料，好讓你日後在使用 Code Snippet 能出現提示文字

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/522f9118b43c50bdd4d3-image_771.png)

最後我們直接按下儲存鍵存檔，Visual Studio 2010 不需要重開，該 Code Snippet 的修改立即生效，這時我們在回到 HTML 文件裡使用 Code Snippet 就可以看到變更了，而且還有我們設定的 Tooltip 提示文字，如下圖示：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/fc7fac56863a4b82b512-image_772.png)

相較於其他程式語言的 Code Snippet 也都是用這種方式管理的，使用上可說是非常簡單，不需要學習複雜的 Code Snippet 的 XML 定義格式就能夠編輯與管理 Code Snippet！

**§ 快速建立自訂的 Code Snippet**

除了修改內建的 Code Snippet 以外，我們自己寫的程式碼通常也都會有一些常用的程式碼片段，我們可以多利用建立自訂的 Code Snippet 來幫助我們加快程式編碼的速度，以下就是利用 [Snippet Designer](https://github.com/mmanela/SnippetDesigner) 快速建立 Code Snippet 的方式。

假設我們有一個 ASP.NET MVC 的 Controller，每次新增一個 Controller 都需要新增一個建構子，而且還需要設定一個類別層級的變數與一些建構子內的程式碼，我們希望將這段程式碼片段變成一個 Code Snippet 就可以先將你想建立 Code Snippet 的程式碼片段選取起來：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/6d6aea9f312080f0efd0-image_773.png) 

然後按下滑鼠右鍵選擇 **Export as Snippet**

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/973dc3c526ae90f696ed-image_774.png) 

這時除了用我們在文章前段說明的編輯方法將 **代入變數** (Replacement) 設定好之外，還有 5 個地方必須注意：

1.  設定這個 Code Snippet 在輸入完成之後鍵盤游標要停留的位置，如下圖示我們在標號 1 的地方
2.  設定 Snippet 的名稱，如下圖示我們在標號 2 的地方設定了 **mvcctor** 名稱
3.  因為我們所建立的 Code Snippet 是個建構子 (Constructor)，其內容必須抓取目前所在類別的名稱，這時我們必須使用到 Code Snippet 的 Function 來產生預設內容，如下圖示我們在標號 3 的地方輸入 **ClassName()** 即可。
4.  這裡的 **classname** 方法名稱其實不需要手動輸入，我們可以在 **classname** 的 **Editable** 取消勾選掉即可不讓使用者對這個變數進行輸入。

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/83212a8054f4e2dbd456-image_775.png)

第 5 個是設定這個 Code Snippet 相關屬性，其中包括一個最重要的 Code Snippet 的捷徑名稱，可以讓我們在程式碼編輯器中快速的啟動 Code Snippet，這時我們必須按下 **F4** 功能鍵開啟屬性視窗，並輸入必要的捷徑 (Shortcut) 名稱，如下圖示：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/b73466a5096e41ad7383-image_776.png)

最後我們將已經設定完成的 Code Snippet 另存新檔：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/87f37703af31291d9a15-image_777.png)

預設其實不需要在特別指定路徑與檔名，直接按下存檔即可。以下是預設路徑與圖示：

```
%USERPROFILE%\Documents\Visual Studio 2010\Code Snippets\Visual C#\My Code Snippets
```

[![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/2dfad3ae28d3ff59db25-SNAGHTML79dbc82_thumb.png)](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/b4149590a2458c69ce09-SNAGHTML79dbc82.png)

以下是使用自訂 Code Snippet 時的畫面圖示：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/a765f623c4fd5ed39ba1-image_778.png)

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/3616058bb4dbaabd16c6-image_779.png) 

大家都知道 Code Snippet 是個好物，但以往編輯 Code Snippet 並不方便，都要學習 Code Snippet 專屬的 XML 語法來設定，不過現在有了 [Snippet Designer](https://github.com/mmanela/SnippetDesigner) 擴充套件，從現在起建立 Code Snippet 已經不是難事，日後只要建立起自己常用的程式碼片段，甚至是修改掉現有的內建 Code Snippet，相信對日常的開發作業都能有所幫助。

**相關連結**

-   [Snippet Designer](https://github.com/mmanela/SnippetDesigner)
-   [Creating and Using IntelliSense Code Snippets](http://msdn.microsoft.com/en-us/library/ms165392.aspx)
-   [Code Snippet Functions](http://msdn.microsoft.com/en-us/library/ms242312.aspx)
-   [Code Snippets Schema Reference](http://msdn.microsoft.com/en-us/library/ms171418.aspx)