2011年12月30日 星期五

使用Code Snippet 增加寫程式效率並使用Snippet Editor做管理


其實在以前還沒有使用 LINQ to SQL 或是 ADO.NET Entity Framework 於專案開發的時候,就已經會使用 Code Snippet 來讓寫程式的速度加快,w因為資料存取層或是商業邏輯層的 CRUD(Create, Read, Update, Delete)會有很多程式是結構雷同的,而只有細節的地方有些變化,畢竟有些程式無法從程式中去抽離出來做為獨立方法或是元件,所以會把這些結構雷同的程式給抽出來做成 Code Snippet,w如此一來在寫程式的時候就可以直接使用 Code Snippet 來減少輸入程式的時間,二來也可以讓程式結構達到一致性。

 


自訂的商業邏輯層 Code Snippets

image

自訂的資料存取層 Code Snippets

image

自訂的 EntityBase 類別的 Code Snippets

image

但是在開始使用 ORM 於專案的開發後,反而就不曾再去使用 Code Snippet 的功能,主要是需要這種會有大量結構一致的程式很少,使用 ORM 之後就不會再去手動撰寫 ADO.NET 的程式,所以就不會再去用到 Code Snipet。但是最近的一個專案無法在專案之中去使用 ORM 來開發,專案中所有資料存取的部分又回到過去手工製作 ADO.NET 的情況,雖然資料存取的部份使用了 Enterprise Library 5.0 DAAB,程式碼比仍使用傳統 ADO.NET 方式撰寫的程式碼要少很多,但畢竟還是有些程式仍然要寫,為了減少這些輸入程式碼時間的浪費,所以又想起了以前使用的 Code Snippet,接下來就介紹如何使用 Snippet Editor 來編輯管理 Code Snippet,以及如何在 Visual Studio 中快速使用Code Snippet。


哪些情況下會想要減少輸入程式碼並且適合抽出來做成一個Code Snippet

寫程式最討厭的就是輸入重複的程式碼,而這些重複的程式碼又不是可以輕易的抽出來做一個共用的 Mehtod,所以這個情況下就會讓人想要去減少輸入重複程式碼的次數,雖然程式還是一樣多,至少不用敲那麼多次鍵盤,下圖中,各位可以看到這些程式都是做同一樣一件事情,結構是雷同且一致的。

image

如果說要輸入的 Parameter 數目不是很多,那還無所謂,那要是 Parameter 數目很多的話,光是輸入這些Parameter 加入的程式碼就要花上不少時間,所以雖然只有短短三行,但是因為使用到的次數會很多,這就很適合抽出來做成一個 Code Snippet 讓專案開發時來使用。

 

Snippet Editor

http://snippeteditor.codeplex.com/

最新版本:2.1.0.0

Snippet Editor Tips and Tricks

NEW RELEASE 2.1.0.0 includes support for VS 2010

程式啟動的畫面

SNAGHTML10238a1

Snippet Editor 支援 VS2005, VS2008, VS2010,而且不論是VB.NET還是C#都可以使用。

image

 

Snippet Editor 預設讀取Code Snippets的位置是在:

C:\Users\使用者帳號\Documents\Visual Studio 2005\Code Snippets

C:\Users\使用者帳號\Documents\Visual Studio 2008\Code Snippets

C:\Users\使用者帳號\Documents\Visual Studio 2010\Code Snippets

image

但不是在Code Snippets目錄下的資料都全部讀取,像在 Visual C# 目錄下有很多的Folder

image

但是在 Snippet Editor 中不會全部讀取載入

image

而在Visual Studio的「程式碼片段管理員」也不會全部載入

SNAGHTML108b8d8

 

新增一個Code Snippet

我們現在要把以下這個新增 OracleParameter 的程式片段做成一個新的 Code Snippet,在 VS2010 的程式編輯畫面中將這三行程式先複製起來,

OracleParameter param1 = new OracleParameter("VIDEO_ID", OracleType.VarChar, 20);
param1.Value = instance.VIDEO_ID;
parameters.Add(param1);

 

我們再到建立「C:\Users\使用者帳號\Documents\Visual Studio 2010\Code Snippets\Visual C#」目錄下去新增子目錄,因為我這要做成 Code Snippet 的程式是有關 Oracle,所以我就目錄命名為「Oracle」

image

 

接著回到 Snippet Editor 視窗中,在「Visual C#」的節點上按右鍵(看你所使用的程式語言為何),然後點選「Add Path …」

image

選擇剛才所建立的「Oracle」目錄

image

增加「Oracle」完成

image

 

接著在「Oracle」節點去按滑鼠右鍵,點選「Add New Snippet」新增一個Code Snippet

image

輸入 New Code Snippet 的名稱

SNAGHTML12e06aa

在「Oracle」節點下就會增加「Add New OracleParameter」項目,然後在這項目上點兩下

image

在 Snippet Editor 右方的 Snippet 編輯區中開啟這個Code Snippet

image

把剛才在 VS2010 複製起來的程式碼片段貼到 Snippet Editor 右方的編輯區塊中,記得要填上 Description, Author 還有 Shortcut,Shortcut 的功能就是可以讓我們在 VS2010 中選用 Code Snippet 時可以更加地快速選用,另外要注意的一點就是「Language」的項目要選對!

image

接下來就是重點的地方,我們將程式碼片段中會需要增加取代變數的地方先反白選擇,再來就是點選下方的「+」圖示

image

或者是也可以在需要增加取代變數的地方去按下右建(先反白選擇),然後點選「Add Replacement」以新增取代變數

image

 

新增要取代的變數後,會把程式碼片段中相同的字詞用兩個「$」符號給包起來,然後下方的變數設定區域會帶入預設的 ID 以及預設值,這邊我們可以自訂修改這些預設值,

image

編輯完成後要記得按下儲存「Save」

 

在 Visual Studio 2010 加入並使用新增的Code Snippet

剛才在 Snippet Editor 所增加的項目還必須要在 VS2010 的程式碼片段管理員去做加入的動作後才可以使用,

開啟「程式碼片段管理員」

image

點選「加入」按鍵

SNAGHTML1364907

選擇剛才新增加的「Oracle」目錄

SNAGHTML1374d6a

選擇資料夾後回到程式碼片段管理員視窗就可以看到加入的「Oracle」以及 Code Snippet

SNAGHTML13c4be4

點選「Add New OracleParameter」可以顯示剛才我們位這個Snippet所加入的屬性資料

SNAGHTML13e986e

 

於VS2010中編輯程式時使用Code Snippet

加入了Code Snippets後就是要在撰寫程式的時候來使用,例如說我們要來修改以下的程式

image

在程式編輯區中要加入程式碼片段的地方按下快速鍵「CTRL + K + X」或是按下滑鼠右鍵並選擇「插入程式碼片段」

image

接著會出現「插入程式碼片段:……」的Intellisense選單,然後使用鍵盤上下鍵移動到「Oracle」項目後按下「Enter」

image

此時就會出現「Oracle」底下所有的Code Snippets,

image

因為我們目前只有一個Snippet所以這時候按一下「下鍵」就可以選用「Add New OracleParameter」,要是日後 Code Snippet 的數量越來越多,光是按鍵盤上下鍵移動去選用 Snippet 就會很花時間,這個時候就可以使用剛才我們所加入的 Shortcut (捷徑),只要輸入「anop」就會自動帶出 Code Snippet 內容,

image

插入程式碼片段

image

image

選用 Snippet 並且插入到程式後,可以按下鍵盤的「TAB」鍵移動程式碼片段的參數,只要還沒有按下「Enter」鍵都還是可以使用「TAB」在 Snippet 所設定的變數中移動,而完成 Snippet 的變數輸入後就按下「Enter」鍵就完成這個插入程式碼片段的操作。

image


更快速的插入程式碼片段方式

除了說用上面的兩種方式可以插入程式碼片段,但是操作上還是有一些多餘的步驟,而我們有對 Code Snippet 加入了 Shortcut 的設定,我們可以用另一個比較快速的方式來做插入程式碼片段的動作。

首先在程式中要插入Code Snippet的地方輸入Shortcut的設定值,

image

緊接著按兩下鍵盤上的「TAB」鍵,就會帶入Code Snippet

image

這個地方要請各位自己去試試,唯有試過之後才能明白這個方式與原有方式相比有多快速。

 

雖然一開始的設定會有點耗費時間,但是在程式設計的時候卻是會大大的減少輸入這些重複性程式碼的時間,所以真的很推薦大家能夠善加利用 Code Snippet,而 Snippet Editor 雖然不是整合在 Visual Studio 之中,但也是非常方便使用。

 

修改Code Snippet並同步更新到Visual Studio中

有新增就會有變更的需要,當我們新增好一個 Code Snippet 後,在程式開發使用時,有時候會有修改 Snippet 的需要,這時候一樣是回到 Snippet Editor 的程式中,Double Click 我們要修改的 Code Snippet,

SNAGHTML15b4550

對 Code Snippet 做一些變動並且儲存起來

SNAGHTML15fec96

接著我們去點選上方的「Synch」按鍵,按下去之後就會去讓 Visual Studio 做更新

image

這時候我們去開啟 VS2010 中的程式碼片段管理員來看看這個修改後的 Code Snippet,可以看到 VS2010 中的 Code Snippet 也同步做了更新。

SNAGHTML16066b5

 


參考連結:

CodePlex – Snippet Editor

http://snippeteditor.codeplex.com/

遺忘技術的角落 - Code Snippet Editor for Visual Basic 2008

http://ms-net.blogspot.com/2008/03/code-snippet-editor-for-visual-basic.html

VS代碼片段(snippet)創作工具——Snippet Editor

http://blog.csdn.net/oyi319/article/details/5605502

 

以上

5 則留言:

  1. 越來越用心了(看圖片的後製就知道)

    回覆刪除
  2. 感謝您的文章,雖然是2011年的文章,即使已經2015,這軟體的介面完全沒變
    依著您的文章,建立了人生第一個snippet

    回覆刪除
    回覆
    1. 感謝你的回覆,也是有其他的工具可以建立與編輯 Code Snippet,可以找找 91 的文章。

      刪除
    2. Visual Studio Extension - Snippet Designer 簡介 - by 91
      https://msdn.microsoft.com/zh-tw/library/Mt148515.aspx

      刪除

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。

最近的留言