Visual Studio前端開發工具/擴充

標籤：標準   文法高亮   聲明   nas   ade   add   使用   nbsp   應該   

怎麼樣讓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等)，確切的說這不是一個工具，不過由於挺有意思的，所以在這個文章裡列出了。

 

 

如果大家有任何好的工具，請在留言裡回複，多謝。

Visual Studio前端開發工具/擴充