幾個常用的 Visual Studio 2013 擴充工具

安裝好 Visual Studio 2013 RC 之後,一併裝了幾個常用的擴充工具。

10/12 更新:我竟然忘了提 Demo 兄架設的 Visual Studio Best Gallery 網站!這個網站已經幫我們篩選整理出好用的套件,相當方便,介面又酷,記得去逛逛喔。

11/14 更新:增加 Go To Definition 和 JavaScript Parser。

小引-關於生產力工具

其實我對功能強大的「生產力工具」始終抱持著一種能省則省的心態。例如我曾用過的 ReSharper,剛開始會讓我覺得寫程式很有快感,霹靂啪啦的(機械式鍵盤也是幫兇之一),方便極了。但其實很多時候,真正能提高生產力的地方,並不在於程式碼能敲多快,而在於把程式碼敲進去之前的思慮是否周延、設計是否完善。

當然這是很主觀的,而且可能夾雜其他考量,例如被大套工具綁住的風險(習慣是很可怕的,萬一它跟不上 Visual Studio 的更新速度怎麼辦?)、擴充工具裝越多即代表耗用越多記憶體或拖慢 IDE 效能等等,甚至可能讓 IDE 突然掛掉(沒科學根據,純粹瞎猜)。因此,我自己是比較少安裝大部頭的工具。

尤其,Visual Studio 2013 的 IDE 功能比先前版本又更強大了,使得有些原本好用的額外工具變得不是那麼重要、非裝不可。比如說,安裝完 Visual Studio 2013 之後,無須特別尋找,寫程式時肯定會發現的 Codelens 功能,參考底下這張螢幕截圖:

類別、屬性、方法上方都會多出一個「# reference」的不醒目提示(灰色的),這個 # 代表它被參考了幾次。用滑鼠點一下這個提示,便會彈出一個小視窗顯示進一步的參考資訊(如上圖)。此彈出視窗底部還有個 Show on Code Map 功能,還可以直接秀關聯圖給你看,一目瞭然。

有關 Codelens 功能的更多介紹,可以看這裡:Find code information in the editor with CodeLens
欲了解 Visual Studio 2013 的新增功能,可以看看 Channel 9 的短片:Visual Studio 2013 Release Candidate

以下就簡單整理幾個我有安裝的擴充工具。

Web Essentials 2013 RC

Web Essentials 可說是開發 web 應用程式不可或缺的工具。這裡有介紹影片:Visual Studio Toolbox: Web Essentials and CSSCop

有一次,我在 Visual Studio 2013 裡面修改了某個 .css 檔案內容之後,欲 commit 至 Git 版本庫時,TortoiseGit 顯示有變動的檔案清單裡面,竟然還有這個 css 檔案的壓縮版本,亦即 .min.css 檔案。我明明只修改了一個 .css 檔案呀!比對檔案內容之後發現,原來是 Web Essentials 擴充套件幫我自動修改的,以確保兩個 css 檔案內容的一致。這真的太貼心了!

Visual Studio 2013 Color Theme Editor

Visual Studio Color Theme Editor 內建多種 UI 風格,可讓我們隨意切換 Visual Studio IDE 的外觀。



VSCommands for Visual Studio 2013

我還蠻喜歡 VSCommands 的一個貼心功能,就是在程式區塊的尾巴(右括弧)後面加註提示,讓你知道這個右括弧是哪一個程式區塊的結尾。例如下圖中三處打勾的地方:

如果這些區塊結束提示一律固定出現,肯定會眼花撩亂。VSCommands 也考慮到了,所以只有當目前的程式編輯器看不見區塊起始的程式敘述時,才會出現結尾註記。

從 Visual Studio 主選單的 TOOLS > VSCommands > Options 可以設定此工具的選項。從這裡也可以發現 VSCommands 還有哪些功能。例如開啟鍵盤熱鍵,讓你可以在程式區塊結尾註記上面雙擊滑鼠左鍵就跳到區塊開頭。

底下截圖為區塊結尾註記的設定畫面(此功能預設不啟用):



SlowCheetah - XML Transforms

Visual Studio 只能對 web.config 進行組態檔轉換,亦即只有 ASP.NET Application 專案才享有組態檔轉換的功能,其他類型的專案,例如 Windows Forms、Console 應用程式,這些專案就沒法使用此功能。SlowCheetah 正好填補了這個缺口。

SlowCheetah 的作者似乎是微軟員工。希望有朝一日把這個擴充功能直接整合進 Visual Studio 吧!

Indent Guidelines

Indent Guidelines 是編輯器的視覺強化工具,我覺得多了垂直虛線的輔助提示的確有些幫助。下圖取自官網:


Image Optimizers

Image Optimizers 可以讓你在 Solution Explorer 裡面對特定影像檔點右鍵,然後對圖檔進行優化處理,也就是在不犧牲圖片品質的前提下,盡量縮小檔案。用法請看官網的介紹

有在寫 Web 應用程式的人一定要試試!

JavaScript Parser

JavaScript Parser 也是 Web 開發人員的輔助工具,從下面這張圖片就能大約看出它的功用(取自官網):


裝好之後,如欲顯示圖中左方的 JavaScript Parser 視窗,可以從主選單點 View > Other Windows > JavaScript Parser。看這裡:Getting Started

Git Source Control Provider

這是後來補上的,寫在另一篇筆記:Git Source Control Provider

Go To Definition

11/14 發現此擴充工具已經支援 Visual Studio 2013,就立刻裝上了。

Visual Studio 內建的 Go To Definition 功能可以讓你將游標從目前所在的識別字(型別、方法、變數名稱等)上面移動至該識別字的原始宣告處。其操作方式為需透過滑鼠右鍵選單或者按 F12。

Go To Definition 擴充工具的作用也一樣,只是操作不方式不同。它可以讓你用 ctrl+click 的方式跳至其識別字的原始宣告。我已經習慣以左手拇指按住 Ctrl 鍵,然後用右手移動滑鼠至欲察看之識別字上方點一下左鍵。儘管 Visual Studio 內建的 F12 按鍵似乎比較簡單,但我還是覺得 ctrl+click 的操作方式才是快速方便,所以它也成為我的必備工具之一了。


大概就醬。Visual Studio Gallery 和 Best Gallery 上面還有很多寶可以挖,例如 CodeMaidReSharper(非免費)等等。

Copyright © 2012. Huan-Lin 學習筆記 - All Rights Reserved
Powered by Blogger
Template Design by Cool Blogger Tutorials
Published by Templates Doctor