2010年9月12日 星期日

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

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


首先來看看未安裝任何輔助工具的Visual Studio 2010下的Javascript檔案
image
有時候JavaScript的程式寫了很多的method,反而會讓人在看程式的時候會更加摸不著頭緒,
這時候要是能夠像寫C#程式一樣,可以把Method給摺疊起來,這樣看程式就比較輕鬆一些。

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

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

要是有人覺得能摺疊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: //#> - //#<

image

加上region後的摺疊效果

image


上面也說過,除了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)

以上




沒有留言:

張貼留言

提醒

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

最近的留言