web前端開(kāi)發(fā)工具有哪些

本篇內(nèi)容介紹了“web前端開(kāi)發(fā)工具有哪些”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

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è)帖子里列出了。

“web前端開(kāi)發(fā)工具有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！