【翻譯】我鍾愛的Visual Studio前端開發工具/擴展

原文: 【翻譯】我鍾愛的Visual Studio前端開發工具/擴展

怎麼樣讓Visual Studio更好地編寫HTML5, CSS3, JavaScript, jQuery，換句話說就是如何更好地作前端開發。Visual Studio 2010無論是旗艦版仍是免費版都沒有對前端開發方面作充分的優化。不要但願VS默認安裝這些東西，咱們有不少VS的擴展但是使用。

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

這裏列出的大多數擴展均可以使用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文件了，不用在單獨下載了。

Image Optimizer (by Mads Kristensen)
下載：Image Optimizer
Visual Studio的擴展工具Image Optimizer使用SmushIt和PunyPNG來優化壓縮圖片，在項目圖片文件夾下運行這個擴展能夠將該目錄下全部的圖片文件進行壓縮。壓縮比率一般在15%到40%。

 

其它未經測試的工具
    JSEnhancements：和JSscript Editor擴展相似，提供大綱和JavaScript/CSS高亮
    CSS 3 intellisense schema
    Chirpy: 處理Js, Css, 和DotLess文件的VS add-in
    ReSharper 6, 不少開發人員都已經使用的工具，支持JavaScript和CSS（收費軟件）。


ASP.NET MVC & HTML5 templates
經過NuGet爲MVC3項目下載該模板，該模板支持更多新型的HTML5元素 （例如input的type新類型Email,Tel,URL等），確切的說這不是一個工具，不過因爲挺有意思的，因此在這個帖子裏列出了。

若是你們有任何好的工具，請在留言裏回覆，多謝。

原文地址：http://blogs.msdn.com/b/katriend/archive/2011/09/12/my-favorite-tools-to-optimize-visual-studio-for-webdev.aspx