Web前端開(kāi)發(fā)是目前非常有“錢(qián)”途的行業(yè)，不僅從業(yè)人員眾多，相應(yīng)的開(kāi)發(fā)工具也不斷涌現(xiàn)。有人想知道前端常用的工具有哪些？有人好奇杭州Web前端學(xué)習(xí)班會(huì)教哪些工具庫(kù)的用法。

前端常用的工具有哪些？

1、jQuery

jQuery由于其無(wú)限的教程，沒(méi)有跨平臺(tái)/瀏覽器問(wèn)題，優(yōu)秀的用戶界面，大量的插件以及它的輕量，快速和快速學(xué)習(xí)等特點(diǎn)而脫穎而出。超過(guò)70％的受訪者選擇jQuery作為他們的前端庫(kù)，它是一個(gè)快速，輕量級(jí)和簡(jiǎn)潔的JavaScript庫(kù)，主要用于HTML文檔遍歷、事件處理、動(dòng)畫(huà)和用于快速Web開(kāi)發(fā)的Ajax交互。從本質(zhì)上講，jQuery最適合需要快速開(kāi)發(fā)的應(yīng)用程序。

2、Bootstrap

超過(guò)65％的開(kāi)發(fā)者選擇Bootstrap作為他們最喜歡的框架來(lái)使用，它是一個(gè)用HTML、CSS和JS開(kāi)發(fā)的開(kāi)源工具包。Bootstrap的廣泛流行主要是因?yàn)樗暮?jiǎn)單使用、優(yōu)秀的社區(qū)以及大量的文章和教程、第三方插件和擴(kuò)展、主題構(gòu)建器等。

3、Angular

如果你打算構(gòu)建一個(gè)動(dòng)態(tài)且強(qiáng)大的單頁(yè)應(yīng)用程序，Angular就是你需要的框架。Angular是高度模塊化的，因此非常適合與團(tuán)隊(duì)分開(kāi)大型工作，并且使測(cè)試和調(diào)試變得輕松。功能優(yōu)先的方法使Angular更加專(zhuān)注于功能，使開(kāi)發(fā)人員的工作更輕松。此外，它還有來(lái)自Google社區(qū)的出色工具和支持。

4、NPM

NPM是Node的包管理器。借助NPM，開(kāi)發(fā)人員可以安裝各種模塊進(jìn)行Web開(kāi)發(fā)，共享和借用軟件包，并管理私有開(kāi)發(fā)。它由網(wǎng)站、命令行界面（CLI）和注冊(cè)表三個(gè)不同的組件組成。

5、Webpack

Webpack是現(xiàn)代JavaScript應(yīng)用程序的模塊打包程序，它將前端開(kāi)發(fā)所需的所有資源（如JavaScript、字體和圖像）集中到一個(gè)地方。如果你正在開(kāi)發(fā)復(fù)雜的前端，這特別有用。你可以去通過(guò)部署具有的WebPack Web應(yīng)用程序，以獲取有關(guān)的WebPack起來(lái)和運(yùn)行。

除了以上工具，還有Sass、React等，根據(jù)企業(yè)所用工具的不同，你需要掌握的工具也不一樣。但熟練應(yīng)用這些工具的前提是你具備扎實(shí)的理論基礎(chǔ)，至于杭州Web前端學(xué)習(xí)班會(huì)教哪些工具的使用，我們需要關(guān)注其課程設(shè)置，還需要注重學(xué)習(xí)機(jī)構(gòu)的教學(xué)模式，畢竟掌握工具的用法比只掌握工具更重要。

前端開(kāi)發(fā)有很多方向，核心包括以下內(nèi)容：

JavaScript編程語(yǔ)言本身，需要多閱讀一些書(shū)籍來(lái)深化了解以及JavaScript在瀏覽器里的各種API，這個(gè)可以多翻閱MDN文檔；工程化：可以通過(guò)一些腳手架以及開(kāi)發(fā)一些腳手架來(lái)提升開(kāi)發(fā)效率；可以通過(guò)對(duì)功能的拆分實(shí)現(xiàn)模塊化與組件化，降低分組開(kāi)發(fā)的難度；可以通過(guò)工具鏈規(guī)劃、測(cè)試、部署代碼，實(shí)現(xiàn)自動(dòng)化；模塊化、組件化、規(guī)范化、自動(dòng)化，這就是工程化；Vue或React框架，學(xué)會(huì)其一即可，這兩個(gè)框架都有自己的生態(tài)，路由、狀態(tài)管理、UI、服務(wù)端渲染；計(jì)算機(jī)科學(xué)知識(shí)：Linux、計(jì)算機(jī)網(wǎng)絡(luò)、數(shù)據(jù)庫(kù)、簡(jiǎn)單的數(shù)據(jù)結(jié)構(gòu)和算法、云服務(wù)等；補(bǔ)充項(xiàng)：工作的時(shí)候再學(xué)沒(méi)有關(guān)系，前端的跨端實(shí)現(xiàn)、typescript等

為啥你提了這么多，沒(méi)有說(shuō)UI的Web實(shí)現(xiàn)，什么布局、樣式、動(dòng)畫(huà)、切圖、實(shí)現(xiàn)一個(gè)商城...這是基礎(chǔ)，不是核心，你可以用UI框架來(lái)做，前端開(kāi)發(fā)可以先不必深究。

前端開(kāi)發(fā)最必不可少也是最經(jīng)常會(huì)使用到的（軟件和網(wǎng)站）：

VS Code，支持前端開(kāi)發(fā)各種文件格式以及自帶emmet語(yǔ)法、代碼提示、自動(dòng)補(bǔ)全、格式化文檔，以及擁有強(qiáng)大的調(diào)試功能，適配所有（應(yīng)該是所有）前端必備工具鏈；Node.js以及前端工具鏈，前端開(kāi)發(fā)離不開(kāi)強(qiáng)大而Node生態(tài)，無(wú)論是git、webpack、lodash、gulp等，還是Vue、React框架，亦或是vuepress、gatsby等開(kāi)源項(xiàng)目，這些都是前端開(kāi)發(fā)需要掌握的；Chrome瀏覽器，前端開(kāi)發(fā)離不開(kāi)Chrome的開(kāi)發(fā)者工具，從了解DOM、終端適配、JavaScript調(diào)試、頁(yè)面加載到性能優(yōu)化等；MDN文檔，MDN文檔是前端開(kāi)發(fā)人員最經(jīng)常翻閱的JavaScript技術(shù)文檔，一定要長(zhǎng)期翻閱

隨著web前端設(shè)計(jì)的職業(yè)需求愈來(lái)愈大，做前端開(kāi)發(fā)的隊(duì)伍也日益壯大。“工欲善其事，必先利其器”，互聯(lián)網(wǎng)上大大小小的編輯工具那么多，哪一個(gè)最好用呢?都有什么特點(diǎn)呢?其實(shí)在于個(gè)人的喜好，用的順手才是最重要的下面介紹幾個(gè)供參考

Brackets

默認(rèn)有兩個(gè)主題，可以通過(guò)安裝theme包拓展新的主題。親測(cè)brackets的插件商店并不是很好用，安裝插件可以通過(guò)網(wǎng)頁(yè)的插件商店查找安裝包.zip的鏈接，然后通過(guò)鏈接安裝。布局方面只支持左右或者上下兩種方式。但是編輯器有一個(gè)很逆天的自帶功能（雖然其他編輯器也可以通過(guò)插件實(shí)現(xiàn)），可以一鍵打開(kāi)一個(gè)瀏覽器窗口，同步預(yù)覽在編輯的網(wǎng)頁(yè)渲染效果，HTML和CSS的修改可以頁(yè)面無(wú)刷新的即時(shí)顯示。另外一個(gè)逆天的功能是，直接在HTML代碼的位置修改CSS，還可以直接在CSS代碼段中選擇編輯顏色。編輯器不集成nodejs調(diào)試，親測(cè)node-debug插件也不是很好用。

Hbuilder

類(lèi)似eclipse的界面，功能也是大而全。主打“綠柔”主題，為了宣傳也是很拼。有很豐富的配置選項(xiàng)，這也是Hbuilder作為一個(gè)IDE和其他幾個(gè)編輯器很大的區(qū)別。同時(shí)支持邊看邊改模式Hbuilder最強(qiáng)大的是可以很方便做移動(dòng)端開(kāi)發(fā)，甚至直接打包hybrid應(yīng)用。Hbuilder是基于eclipse開(kāi)發(fā)的，所以也是使用的eclipse插件。在插件菜單，Hbuilder推薦了一些常用插件，基本覆蓋了前端開(kāi)發(fā)需要的各種功能。

Dreamweaver

簡(jiǎn)稱(chēng)DW，有著很好聽(tīng)的中文名字“夢(mèng)想編織者”這可能是使用最廣泛的編輯器啦，說(shuō)到web前端，大家想到的使用工具一般都是Dreamweaver，就是因?yàn)槭褂玫娜硕啵褂媒坛毯芏啵运彩潜容^適合初學(xué)者的一款軟件。其中，DW3.0不足3M，乃是經(jīng)典版，在配置很低的電腦上也能速度很快地流暢運(yùn)行。可以說(shuō)，這是一個(gè)非常經(jīng)典的編輯器，中規(guī)中矩，大部分常規(guī)功能都有。

Atom

有人說(shuō)他是21世紀(jì)黑客文本編輯器，卻擁有著小清新的顏值，UI交互也是做得非常好。軟件本身體積很小，是一個(gè)開(kāi)源免費(fèi)的軟件，支持多種語(yǔ)言，擁有豐富的插件，可以自定義界面。但是不太適合打開(kāi)運(yùn)行大文件，svn的支持也比較差。不過(guò)他有著比較強(qiáng)大社區(qū)支持，有社區(qū)支持的話，就代表著軟件一直有人在維護(hù)，持續(xù)開(kāi)發(fā)。

Visual Studio Code

他簡(jiǎn)稱(chēng)VSC，是一款免費(fèi)開(kāi)源的現(xiàn)代化輕量級(jí)代碼編輯器，支持幾乎所有主流的開(kāi)發(fā)語(yǔ)言，有語(yǔ)法高亮、智能代碼補(bǔ)全、自定義熱鍵、括號(hào)匹配、代碼片段、代碼對(duì)比 Diff、GIT 等優(yōu)勢(shì)，支持插件擴(kuò)展，并針對(duì)網(wǎng)頁(yè)開(kāi)發(fā)和云端應(yīng)用開(kāi)發(fā)做了優(yōu)化。他有兩大特點(diǎn)， 一是插件數(shù)量多，二是是他是微軟提供支持全職團(tuán)隊(duì)來(lái)開(kāi)發(fā)的一款編輯器，這是很難得的。該軟件還同時(shí)支持主流三大平臺(tái)。

Sublime Text

他有著帥酷界面，黑色打底，男生用帥，女生用酷，上面的代碼五顏六色，不同類(lèi)型的標(biāo)簽顏色不同，語(yǔ)法高亮，甚至可以多行選擇多行編輯。最有特點(diǎn)的是他能夠支持多種布局和代碼縮略圖，用戶可以根據(jù)自己的喜好來(lái)調(diào)整布局設(shè)置，還可以啟動(dòng)全屏免打擾模式，精心安心敲代碼。同時(shí)他也有編輯恢復(fù)能力，也是他的一大特色之一，有了這個(gè)功能，媽媽再也不擔(dān)心我忘記保存代碼突遇停電啦!

雖然他也是收費(fèi)的軟件，但是可以不限期免費(fèi)試用，只是會(huì)在使用的時(shí)候總會(huì)有彈窗。但是他也有些缺點(diǎn)，比如sublime text原生對(duì)中文支持不太友好，需要安裝插件才能解決。

WebStrom

一款被廣大前端設(shè)計(jì)師譽(yù)為“web前端開(kāi)發(fā)神器”的H5編輯器。他與Intellij IDEA同源，繼承了Intellij IDEA強(qiáng)大的JS部分功能，因此也被稱(chēng)為“最智能的Java IDE”。大部分編輯器有的智能代碼不全，html提示，聯(lián)想查詢，代碼檢查等功能，毫無(wú)疑問(wèn)的他也擁有，而且他還額外有代碼重構(gòu)，代碼結(jié)構(gòu)瀏覽，去掉外圍代碼，代碼格式化等等強(qiáng)大而且人性化的功能。可以說(shuō)唯一的缺點(diǎn)就是要收費(fèi)吧，如果真的需要長(zhǎng)期使用，還是花59美元去買(mǎi)一個(gè)正版的。