The Will Will Web

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

在 Visual Studio 2010 活用 jQuery 的開發工具使用技巧

我們在日常開發工作當中對於 jQuery 已經非常依賴,幾乎每個大大小小的案子都會用上一些,所以深入瞭解 Visual Studio 2010 能帶來什麼幫助十分重要,妥善的利用開發工具帶來的便利性將可以有效減少開發時間、提升開發效率,今天我就要介紹幾個 Visual Studio 2010 與 jQuery 相關功能、開發技巧與好用工具。

※ Visual Studio 2010 對於 JavaScript Intellisense 的增強 ※

這次 Visual Studio 2010 對 JavaScript Intellisense 的支援增強了許多,甚至於對 jQuery 來說簡直可以說是量身打造的,不管你怎麼設定都很容易出現 jQuery 相關的 Intellisense,請參考以下例子:

你只要在 MasterPage 載入 jQuery 最小化(minify)的版本,就可以在頁面中享受 Intellsense 的好處:

而在未來即將上市的 Visual Studio 2010 中文版,甚至會有全中文的註解說明,是不是佛心來著的!

雖然你在 MasterPage 載入的是最小化過的 jQuery 版本,但 Visual Studio 2010 會自動搜尋該檔案所在目錄是否有 jquery-1.4.1-vsdoc.js 檔案,只要一經發現就會自動載入做為 Intellsense 之用。這功能在 Visual Studio 2008 也有提供 Hotfix 可供下載,詳情請見此網頁:VS2008 SP1 Hotfix to Support "-vsdoc.js" IntelliSense Doc Files

即便你在 MasterPage 中載入的是 CDN 的 jQuery 版本,只要在專案中有載入同檔名的 jQuery,Visual Studio 2010 一樣能幫你找到適當的 jQuery Intellisense 提示你!

若你發現 jQuery 的 Intellisense 沒有作用的話,可能是 Visual Studio 2010 尚未將專案中所有 JavaScript Library 的 Intellisense 資訊更新,這時你可以利用 Visual Studio 2010 中的 Update JScript Intellisense 功能 ( 快速鍵: Ctrl + Shift + J )  即可立即更新 JavaScript 的 Intellisense 支援。

image

 

※支援 Visual Studio 2010 的 jQuery 程式碼片段 ※

Visual Studio 2010 對程式碼片段(Code Snippets)功能也增強不少,現在除了在 cs 檔中可以使用 Code Snippets 外,也可以在 HTML/ASPX/JS 檔案中使用 Code Snippets,如果你的游標處於 HTML/ASPX 檔案中的 <script> … </script> 裡面,Visual Studio 2010 也會自動提示與 JavaScript 相關的 Code Snippets 供您選擇。

首先你可以到 jQuery Code Snippets for Visual Studio 2010 下載 jQuery Snippets 安裝檔,目前的 jQuery Snippets 1.0 就有提供131 個與 jQuery 有關的 Code Snippets,可說是非常實用,如果你想透過影片感受如何使用,可以參考這則教學影片:http://screencast.com/t/YjUyNDVjZD

安裝好之後,你可以試著在頁面的 <head> 區塊內輸入 <jq 即可出現 Code Snippets 提示:

選取後按下 Tab 鍵就會自動完成

【注意事項】

如果你希望在 HTML 中輸入標籤時能自動出現 Code Snippets 的 Intellisense 提示,那麼你必須先輸入一個小於符號 ( < ) 才會自動出現提示,否則你也可以按下鍵盤的 Ctrl + J 快速鍵也能立即出現 Intellisense 選單。

接著你在到 JavaScript 中輸入 jq 開頭就會再提示出可用的 Code Snippets

有了這些好用的 Code Snippets 在開發過程中將會變得非常順利,少打一些字也可以減輕手指的負擔。

如果你覺得這些 Code Snippets 的內容過於老舊,你也可以自行修改安裝後的 *.snippets 檔案,這些檔案都是 XML 格式的文件,很容易看懂如何修改,如需深入研究可參考 Code Snippets Schema Reference 的說明。jQuery Code Snippets for Visual Studio 2010 預設的安裝目錄如下:

我的文件\Visual Studio 2010\Code Snippets\Visual Web Developer

雖然在 CodePlex 上出現了一個感覺還不錯的 Snippet Designer 工具,但目前還無法支援 HTML 或   JavaScript 類型的 Code Snippets,如果你用此工具編輯這些不支援的類型的 Code Snippets 將會破壞原本的格式而導致 Code Snippets 無法正常使用,所以這點需特別小心。

你還有沒有什麼在 Visual Studio 2010 中與 jQuery 相關的開發技巧呢?歡迎留言分享!^_^

相關連結