怎么樣讓Visual Studio更好地編寫(xiě)HTML5, CSS3, JavaScript, jQuery，換句話說(shuō)就是如何更好地做前端開(kāi)發(fā)。Visual Studio 2010不管是旗艦版還是免費(fèi)版都沒(méi)有對(duì)前端開(kāi)發(fā)方面做充分的優(yōu)化。不要希望VS默認(rèn)安裝這些東西，我們有很多VS的擴(kuò)展可是使用。

這里列出的大多數(shù)擴(kuò)展都可以使用Extension Manager (Tools > Extension Manager)來(lái)安裝，你可以通過(guò)Visual Studio Gallery網(wǎng)站下載這些擴(kuò)展。

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

這是第一個(gè)我推薦的關(guān)于編輯HTML5, CSS3和JavaScript代碼的擴(kuò)展 ，由微軟的Visual Web Developer team開(kāi)發(fā)，包括了HTML5 schema的支持，改進(jìn)了CSS3和JavaScript的智能提示。盡管Visual Studio Service Pack 1提供了一些HTML5 schema的支持，但是我推薦使用這個(gè)（應(yīng)該是最新的）。關(guān)于此的更多信息，請(qǐng)?jiān)L問(wèn)：Web Standards Update - behind the scenes


JScript Editor Extensions
下載：JScript Editor Extensions

你可能習(xí)慣了C#里的語(yǔ)法高亮，區(qū)域大綱折疊等功能，JavaScript默認(rèn)是不支持的，這個(gè)插件就是做這個(gè)事情的。

安裝JScript Editor擴(kuò)展以后，你可以對(duì)以下不同的擴(kuò)展進(jìn)行開(kāi)啟和禁用：Brace Matching，JScript Intellisense <Para>，Outlining and Word Highlighter. 有時(shí)候知道一些依賴擴(kuò)展也是比較好的。例如JqueryUI依賴于Jquery。

請(qǐng)查看Channel9上的關(guān)于該擴(kuò)展的一個(gè)應(yīng)用視頻。


Mindscape Web Workbench
下載：Mindscape Web Workbench

Scott Hanselman有個(gè)帖子專門(mén)講解了Visual Studio下的“Mindscape Web Workbench”擴(kuò)展， 它加入了對(duì)CoffeeScript, SAAS和LESS的支持。擔(dān)心有太多的擴(kuò)展？沒(méi)必要，作為開(kāi)發(fā)人員是很有必要的。
    Coffeescript: CoffeeScript是一個(gè)能將代碼編譯成JavaScript的語(yǔ)言。
    SAAS: Sass是一個(gè)關(guān)于CSS3的擴(kuò)展，添加了variables, mixins,選擇器集成等功能。它可以標(biāo)準(zhǔn)化和格式化CSS代碼，使用VS的擴(kuò)展可以自動(dòng)格式化代碼。
    LESS: LESS和SASS類型也是提供了對(duì)variables, mixins的支持，但是他提供一個(gè)了服務(wù)器端服務(wù)器以及將代碼轉(zhuǎn)化成標(biāo)準(zhǔn)CSS的插件（通過(guò)在客戶端運(yùn)行一個(gè)JavaScript類庫(kù)）。


JSLint.VS2010
下載：JSLint.VS2010

當(dāng)你看到JSLint名稱的時(shí)候，你可能感覺(jué)到不用JavaScript就沒(méi)辦法做前端開(kāi)發(fā)。但是如何使用一些模式以及驗(yàn)證你的JS代碼，JSLint可以為你做這件事。使用這個(gè)插件可能剛開(kāi)始會(huì)讓你感覺(jué)不爽，因?yàn)樗褂昧撕芏囝愃艭#的規(guī)則（例如，某些變量聲明了但是沒(méi)使用）在編譯的時(shí)候提示警告。但是一旦過(guò)了一段時(shí)間以后，你就會(huì)發(fā)現(xiàn)它確實(shí)幫你改掉了很多壞習(xí)慣，也讓你的代碼更加容易維護(hù)。

（可以看到，代碼盡管可以運(yùn)行，但是提示了很多警告）
你也可以查看它的在線版本：http://jslint.com



jQuery IntelliSense
asp.net MVC3項(xiàng)目創(chuàng)建的時(shí)候就已經(jīng)包含jQuery和jQuery智能提示的文件了，如果你想再其它類型的項(xiàng)目使用jQuery智能提示，可以通過(guò)下載jQuery.vsdoc的NuGet包來(lái)實(shí)現(xiàn)，不過(guò)jQuery1.6以后的版本默認(rèn)在NuGet包里已經(jīng)包含了該vsdoc文件了，不用在單獨(dú)下載了。

Image Optimizer (by Mads Kristensen)
下載：Image Optimizer
Visual Studio的擴(kuò)展工具Image Optimizer使用SmushIt和PunyPNG來(lái)優(yōu)化壓縮圖片，在項(xiàng)目圖片文件夾下運(yùn)行這個(gè)擴(kuò)展可以將該目錄下所有的圖片文件進(jìn)行壓縮。壓縮比率通常在15%到40%。

其它未經(jīng)測(cè)試的工具
    JSEnhancements：和JSscript Editor擴(kuò)展類似，提供大綱和JavaScript/CSS高亮
    CSS 3 intellisense schema
    Chirpy: 處理Js, Css, 和DotLess文件的VS add-in
    ReSharper 6, 很多開(kāi)發(fā)人員都已經(jīng)使用的工具，支持JavaScript和CSS（收費(fèi)軟件）。


ASP.NET MVC & HTML5 templates
通過(guò)NuGet為MVC3項(xiàng)目下載該模板，該模板支持更多新型的HTML5元素 （例如input的type新類型Email,Tel,URL等），確切的說(shuō)這不是一個(gè)工具，不過(guò)由于挺有意思的，所以在這個(gè)帖子里列出了。

如果大家有任何好的工具，請(qǐng)?jiān)诹粞岳锘貜?fù)，多謝。

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

以上這篇Visual Studio 2010 前端開(kāi)發(fā)工具/擴(kuò)展/插件推薦就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論