一些Visual Studio 2010對於JavaScript的輔助外掛

使用Visual Studio開發網站專案，對於Code Behind程式的編寫輔助都已經有了內建的工具
或是一些外掛工具的輔助，然而對於JavaScript的輔助工具卻不是很多，除了重要的Intellisence外，
卻不見對於JavaScript有更好的管理輔助，
例如，摺疊原始碼、綜覽程式碼架構等…


首先來看看未安裝任何輔助工具的Visual Studio 2010下的Javascript檔案

有時候JavaScript的程式寫了很多的method，反而會讓人在看程式的時候會更加摸不著頭緒，
這時候要是能夠像寫C#程式一樣，可以把Method給摺疊起來，這樣看程式就比較輕鬆一些。

JSEnhancements
http://visualstudiogallery.msdn.microsoft.com/zh-tw/0696ad60-1c68-4b2a-9646-4b5f4f8f2e06
這個工具可以讓我們可以在Javascript程式中使用摺疊功能。
工具安裝完畢並重新開啟Visual Studio 2010後，就可以看到Javascript可以使用摺疊功能了

這工具提供的摺疊功能除了支援Javascript程式碼之外，也支援css


而有了可以摺疊Javascript功能外，似乎如果可以有個綜覽Javascript檔案中Method結構的功能，
那麼在編輯Javascript程式就會更加清楚並且更好管理。
Javascript parser
http://visualstudiogallery.msdn.microsoft.com/zh-tw/288a2b0f-1357-47b4-8215-1134c36bdf30
安裝完成並重新開啟Visual Studio 2010後，在下圖所顯示的位置，選擇顯示檢視視窗。

在Javascript Parser的檢視視窗中，就可以清楚的顯示Javascript的程式架構


要是有人覺得能摺疊Javascript Method或是部分結構的功能還不是足夠，最好是能夠有 region 功能。
也的確是有這樣的輔助工具，而且不只在Javascript程式中可以使用，在CSS也可以用 region。

VisualStudio 2010 JavaScript Outlining
http://visualstudiogallery.msdn.microsoft.com/zh-tw/d1598667-a8a0-4144-8bf0-e75acca6414a
http://jsoutlining.codeplex.com/
安裝完成並重新開啟Visual Studio 2010後，打開Javascript檔案，在想要加上 region 的地方加上以下的程式碼。

   1: //#region - //#endregion

   2: 或是

   3: //#> - //#<

加上region後的摺疊效果




上面也說過，除了Javascript外也可以對CSS使用 region，這部分就不做說明，
以下的網頁連結內容有詳細的說明。
http://jsoutlining.codeplex.com/documentation

介紹了三個在Visual Studio 2010的Javascript輔助外掛工具，讓編寫前端程式的時候更加方便與清楚。

JSEnhancements
http://visualstudiogallery.msdn.microsoft.com/zh-tw/0696ad60-1c68-4b2a-9646-4b5f4f8f2e06

Javascript parser
http://visualstudiogallery.msdn.microsoft.com/zh-tw/288a2b0f-1357-47b4-8215-1134c36bdf30

VisualStudio 2010 JavaScript Outlining
http://visualstudiogallery.msdn.microsoft.com/zh-tw/d1598667-a8a0-4144-8bf0-e75acca6414a
http://jsoutlining.codeplex.com/

相關連結：

demoshop
Visual Studio 擴充套件 折疊你的 Javascript
Visual Studio 擴充 折疊 Javascript (包含Aspx)

以上

---

---