The Will Will Web | 介紹好用 Visual Studio 2010 擴充套件:Snippet Designer

The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

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

在 Visual Studio 2010 之前的版本所支援的 Code Snippet 種類非常有限,只有在編輯 C#Visual BasicXML 時可以使用而已,但到了 Visual Studio 2010 又新增了 JavaScriptHTML 以及 SQL 語法等 Code Snippet 支援,在寫程式時就更加方便了,在這裡我必須要推薦這套 Snippet Designer 擴充套件,���能幫我們用更人性化的方式管理我們常用的或內建的 Code Snippet 程式碼片段。

你可以從 Visual Studio 2010 的擴充管理員進行套件安裝,開啟後點選 線上圖庫 分類,然後在右上角的搜尋文字框輸入 Snippet Designer 就可以查到 Snippet Designer 項目。

要能活用這個 Snippet Designer 擴充套件,主要有兩個部分必須瞭解:

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

 

§ 管理現有的 Code Snippet

安裝好 Snippet Designer 擴充套件並重開 Visual Studio 2010 之後可以從 [檢視] / [其他視窗] / [Snippet Explorer] 開啟 Snippet Explorer 視窗:(點圖可放大)

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

 

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

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

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

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

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

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

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

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

 

§ 快速建立自訂的 Code Snippet

除了修改內建的 Code Snippet 以外,我們自己寫的程式碼通常也都會有一些常用的程式碼片段,我們可以多利用建立自訂的 Code Snippet 來幫助我們加快程式編碼的速度,以下就是利用 Snippet Designer 快速建立 Code Snippet 的方式。

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

 

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

 

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

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

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

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

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

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

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

 

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

相關連結