最近老闆幫換ThinkPad 聯想 T490 14吋商務筆電 20N2CTO1WW(i5-8265U/8G/512G SSD/NV MX250 2G/Win10)的標配，目標讓我們成為行動IT，另一個目標就是Coding要更有效率，去年用了公費花了一萬六千多去恆逸教育訓練中心上過《使用jQuery UI整合ASP.NET Web Form網站開發》，課程裡學了使用ZenCoding來更快速地編寫和編輯HTML、XML、XSL和其他結構化的代碼。
另外也提到jQuery Code Snippets，不過當時沒有講到操作及細節，今天哥有空就來實作一下，讓複製貼上程式碼的效率可以更快一點。
聽說 VS2010 的時候就有了jQuery 編輯時的 intellisense 輔助，但還是會需要手動去加入 jQuery.min 或是 vsdoc 檔案的引用並更新 JScript Intellisense 之後才會有 jQuery Intellisense 的顯示。而在Visual Studio 2017中不用再去重複上面的動作，直接在頁面中就能有 jQuery Intellisense 的輔助支援。
雖有 jQuery Intellisense 的輔助，但前端程式寫久了總是會覺得想要有更快速的輸入方式，另外也可以減少輸入太多的程式碼，在編寫 C# 的程式時我們可以利用 Code Snippets 的方式來達到這樣的需求，而 jQuery 一樣也可以使用 Code Snippets 來達到這樣的需求，差別在於有人整理好將近 130 多個 jQuery Code Snippets，而我們只要在Visual Studio 2017裝好這些 jQuery Code Snippets 後就可以讓我們編寫 jQuery 程式時有 Code Snippets 可以使用。
[ads2]
jQuery Code Snippets
Visual Studio Marketplace
https://marketplace.visualstudio.com/items?itemName=kspearrin.jQueryCodeSnippets
github
https://github.com/kspearrin/Visual-Studio-jQuery-Code-Snippets
在 Visual Studio Marketplace 與 Github 專頁上都已經把安裝步驟寫得相當詳細了，不過哥還是以圖片加上中文描述的方式來說明一次，讓大家可以加深印象，如果對於 jQuery Code Snippets 不清楚會為我們在編寫 jQuery 程式有什麼效益的話，可以看看作者所錄製的 30秒示範影片，看過一次就會知道啦！
30 Second Demo Video：http://www.youtube.com/watch?v=Escy0hbEkI8
注意！Visual Studio 2012-2019上版本才有
[ads2]
安裝
一、選取「工具」- 「擴充功能和更新(U)」
在「擴充功能和更新」搜尋輸入jquery，就會出現 jQuery Code Snippetsdk可以安裝，按「下載」
二、設定 Visual Studio 程式碼片段管理員
開啟 Visual Studio 2017，並且開啟「程式碼片段管理員」
[ads2]
開啟「程式碼片段管理員」視窗後，「語言」下拉選單的選項設定為「HTML」，可以在「程式碼片段管理員」的 HTML 中看到加入的「 jQuery」，
接著更換「語言」的下拉選單為「JavaScript」，可以看到加入的「jQuery」
使用
三、在 View 中使用 jQuery HTML Code Snippets
先來試試看在 View 的原始碼中使用 jQuery的 Code Snippets，我們可以參照上圖的各個 Code Snippets 檔名來輸入，例如，在頁面的空白處輸入「jq」
再按「Tab 鍵」，就會自動輸入 Code Snippet
例如，輸入「jqscriptcdngoogle」
緊接著再按「Tab 鍵」，就會自動輸入使用 google CDN 的 jquery script
四、使用 jQuery JavaScript Code Snippets
再來就是來試試看 jQuery JavaScript 的 Code Snippets，jQuery JavaScript Code Snippets 就是要在 Script 的範圍中才能夠使用，而且與 jQuery HTML Code Snippets 不同的地方在於 jQuery JavaScript Code Snippets 有 intellisense 顯示，這樣就不需要太強記這 124 個 Code Snippets 的名稱了，首先，先在頁面中使用「jq」快速鍵建立 Script 區塊
然後在 Script 區塊中輸入「jq」字首就會有 intellisense 顯示
我們輸入「jqclick」後按兩次「Tab 鍵」，就會帶出 jQuery Click 事件的程式片段，這時候就可以看到程式片段中的「selector」是反白狀態，並且游標停留在上面，這是讓我們可以繼續輸入 selector 內容
當輸入 selector 內容之後按下「Enter 鍵」，反白狀態就會取消並且游標會移到下方的程式內，讓我們可以開始輸入click 事件處理的程式碼
例如，輸入「jqajax」後再按一次「Tab 鍵」，自動帶出 jQuery Ajax 的程式碼片段
輸入反白的內容後按「Tab 鍵」會移動到下一個反白的內容讓我們繼續輸入，當最後一個輸入完畢後按下「Enter 鍵」就會把游標帶到要輸入程式的位置
除了上面在 View 原始碼中可以使用之外，在單獨的 Script 檔案中也是可以使用 jQuery JavaScript Code Snippets
如果想要有個 Code Snippets 的清單來了解有哪些已經做好程式片段，可以到「Snippet Listing」頁面做查閱
https://github.com/kspearrin/Visual-Studio-jQuery-Code-Snippets/wiki/Snippet-Listing
另外如果也想要讓 VS2010 也一樣有 jQuery Code Snippets 功能可以使用的話，可以使用由 John Sheehan 所開發的「jQuery Code Snippets for Visual Studio 2010」
[ads2]
「jQuery Code Snippets for Visual Studio 2010」是 jQuery Code Snippets的原始參照，所以兩邊的 Code Snippets 是差不多的。
當處理前端 jQuery 程式越來越頻繁的情況下，善用 jQuery Code Snippets 就可以增進我們在編輯程式時的效率！
以上
六角學院有一個使用 jQuery 打造互動性網頁動畫效果課程，在Youtube也有一段的課程影片，大家可以參考看看
相關網頁設計學習：
※jQuery UI入門