我鐘愛的Visual Studio前端開發工具/擴展

作者：湯姆大叔 2011-11-22 13:44:18

這篇帖子里你可以看到有一組我喜愛的擴展和工具能讓Visual Studio在web開發方面更簡單，我只是集中在我安裝和使用過的一些工具，如果你還有其它好用的的話，請在這里留言。

怎么樣讓Visual Studio更好地編寫HTML5, CSS3, JavaScript, jQuery，換句話說就是如何更好地做前端開發。Visual Studio 2010不管是旗艦版還是免費版都沒有對前端開發方面做充分的優化。不要希望VS默認安裝這些東西，我們有很多VS的擴展可是使用。

這里列出的大多數擴展都可以使用Extension Manager (Tools > Extension Manager)來安裝，你可以通過Visual Studio Gallery網站下載這些擴展。

Web Standards Update for Visual Studio

下載：Web Standards Update for Microsoft Visual Studio 2010 SP1

這是***個我推薦的關于編輯HTML5, CSS3和JavaScript代碼的擴展，由微軟的Visual Web Developer team開發，包括了HTML5 schema的支持，改進了CSS3和JavaScript的智能提示。盡管Visual Studio Service Pack 1提供了一些HTML5 schema的支持，但是我推薦使用這個(應該是***的)。關于此的更多信息，請訪問：Web Standards Update - behind the scenes

JScript Editor Extensions

下載：JScript Editor Extensions

你可能習慣了C#里的語法高亮，區域大綱折疊等功能，JavaScript默認是不支持的，這個插件就是做這個事情的。

安裝JScript Editor擴展以后，你可以對以下不同的擴展進行開啟和禁用：Brace Matching，JScript Intellisense <Para> ，Outlining and Word Highlighter. 有時候知道一些依賴擴展也是比較好的。例如JqueryUI依賴于jQuery。

請查看Channel9上的關于該擴展的一個應用視頻。

Mindscape Web Workbench

下載：Mindscape Web Workbench

Scott Hanselman有個帖子專門講解了Visual Studio下的“Mindscape Web Workbench”擴展，它加入了對CoffeeScript, SAAS和LESS的支持。擔心有太多的擴展?沒必要，作為開發人員是很有必要的。

◆ Coffeescript: CoffeeScript是一個能將代碼編譯成JavaScript的語言。

◆ SAAS: Sass是一個關于CSS3的擴展，添加了variables, mixins,選擇器集成等功能。它可以標準化和格式化CSS代碼，使用VS的擴展可以自動格式化代碼。

◆ LESS: LESS和SASS類型也是提供了對variables, mixins的支持，但是他提供一個了服務器端服務器以及將代碼轉化成標準CSS的插件(通過在客戶端運行一個JavaScript類庫)。

JSLint.VS2010

下載：JSLint.VS2010

當你看到JSLint名稱的時候，你可能感覺到不用JavaScript就沒辦法做前端開發。但是如何使用一些模式以及驗證你的JS代碼，JSLint可以為你做這件事。使用這個插件可能剛開始會讓你感覺不爽，因為他使用了很多類似C#的規則(例如，某些變量聲明了但是沒使用)在編譯的時候提示警告。但是一旦過了一段時間以后，你就會發現它確實幫你改掉了很多壞習慣，也讓你的代碼更加容易維護。

(可以看到，代碼盡管可以運行，但是提示了很多警告)

你也可以查看它的在線版本：http://jslint.com

jQuery IntelliSense

asp.net MVC3項目創建的時候就已經包含jQuery和jQuery智能提示的文件了，如果你想再其它類型的項目使用jQuery智能提示，可以通過下載jQuery.vsdoc的NuGet包來實現，不過jQuery1.6以后的版本默認在NuGet包里已經包含了該vsdoc文件了，不用在單獨下載了。