hbuilder編輯器是DCloud推出的一款支持HTML5的Web開(kāi)發(fā)IDE。快,是HBuilder的最大優(yōu)勢(shì),通過(guò)完整的語(yǔ)法提示和代碼輸入法、代碼塊等,大幅提升HTML、js、css的開(kāi)發(fā)效率。同時(shí),它還包括最全面的語(yǔ)法庫(kù)和瀏覽器兼容性數(shù)據(jù)。
HBuilder的問(wèn)世有意義的推動(dòng)和加速HTML5的發(fā)展,碎片化的語(yǔ)法定義和瀏覽器兼容性一直是開(kāi)發(fā)者最頭疼的,現(xiàn)在開(kāi)發(fā)者有福了,在 HBuilder最全語(yǔ)法庫(kù)中可以看到每個(gè)語(yǔ)法在各個(gè)瀏覽器、各個(gè)版本的支持情況。集成大量常用語(yǔ)法塊,少敲多行代碼,飛一般地編碼,體驗(yàn)極客速度。
軟件介紹:
在HBuilder里預(yù)置了一個(gè)hello HBuilder的工程,用戶敲這幾十行代碼后會(huì)發(fā)現(xiàn),HBuilder比其他開(kāi)發(fā)工具至少快5倍。
HBuilder的生態(tài)系統(tǒng)可能是最豐富的Web IDE生態(tài)系統(tǒng),因?yàn)樗瑫r(shí)兼容Eclipse插件和Ruby Bundle。SVN、git、ftp、PHP、less等各種技術(shù)都有Eclipse插件。
HTML5語(yǔ)法、HTML5+語(yǔ)法、三大瀏覽器擴(kuò)展語(yǔ)法,盡收HBuilder中。每個(gè)瀏覽器發(fā)布新版后,一周內(nèi),其新增語(yǔ)法就收錄入HBuilder。
哦,怎么能忘記js框架,這里有強(qiáng)大到令你震驚的Jquery語(yǔ)法提示!
每個(gè)語(yǔ)法在哪個(gè)瀏覽器、哪個(gè)版本上是否可運(yùn)行,這里都有。沒(méi)有比這里更全的語(yǔ)法庫(kù),也沒(méi)有比這里更全的瀏覽器兼容性數(shù)據(jù)庫(kù)。
功能特色:
代碼輸入法:一個(gè)數(shù)字鍵,少敲10個(gè)按鍵;
代碼塊:一個(gè)代碼塊,少敲50個(gè)按鍵;
模糊匹配:跳著敲字母就能匹配到單詞;
內(nèi)置emmet,tab一下生成一串代碼;
智能補(bǔ)齊:感知你的意圖,自動(dòng)完成輸入;
跳轉(zhuǎn)助手、選擇助手,不用鼠標(biāo),手不離鍵盤(pán);......
才比別的工具快5倍?對(duì)極客而言,追求快,沒(méi)有止境!
常見(jiàn)問(wèn)題:
Q:怎么才能快速掌握HBuilder開(kāi)發(fā)技巧?
A:軟件自帶HelloHBuilder項(xiàng)目,該項(xiàng)目為教程項(xiàng)目(如果不小心刪除了不要擔(dān)心,可以在新建WEB項(xiàng)目時(shí),使用HelloHBuilder模板新建出來(lái)),按照項(xiàng)目中的lesson1.txt中的快捷鍵敲一遍即可快速掌握HBuilder快速開(kāi)發(fā)技巧。
Q:什么是HTML5+?
A:HTML5+規(guī)范是基于HTML5的擴(kuò)展規(guī)范,用于彌補(bǔ)HTML5和原生應(yīng)用功能之間的差距。HTML5+規(guī)范是一個(gè)開(kāi)放的規(guī)范,在W3C中國(guó)的指導(dǎo)下,由HTML5中國(guó)產(chǎn)業(yè)聯(lián)盟運(yùn)作(www.html5plus.org),所有規(guī)范都是面向開(kāi)發(fā)者的,開(kāi)發(fā)者提需求、開(kāi)發(fā)者評(píng)審實(shí)現(xiàn)方案、開(kāi)發(fā)者投票選定規(guī)范。
Q:什么叫滾動(dòng)條信息點(diǎn)?
A:當(dāng)代碼中有重要的標(biāo)記出現(xiàn)時(shí),會(huì)生成滾動(dòng)條信息點(diǎn),在滾動(dòng)條右側(cè)出現(xiàn)顏色各異的點(diǎn)。點(diǎn)擊這些點(diǎn)或使用跳轉(zhuǎn)到下一個(gè)信息點(diǎn)功能,可以快速到達(dá)這些代碼處。如下標(biāo)記會(huì)生成信息點(diǎn):書(shū)簽、任務(wù)、錯(cuò)誤提示。
Q:怎么實(shí)現(xiàn)代碼追蹤?
A:在編輯代碼時(shí)經(jīng)常會(huì)出現(xiàn)需要跳轉(zhuǎn)到引用文件或者變量定義的地方,HBuilder提供了一個(gè)非常好用的代碼追蹤功能,只需要按住Ctrl+鼠標(biāo)左鍵即可實(shí)現(xiàn)追蹤。
圖示:
Q:輸入small不提示,語(yǔ)法庫(kù)是不是不全?
A:代碼塊是否提示,取決于是否設(shè)置了這個(gè)代碼塊,代碼塊是可自定義的。默認(rèn)沒(méi)有預(yù)置small代碼塊,你也可以在代碼塊彈出界面點(diǎn)右下角的編輯圖標(biāo),進(jìn)行代碼塊的補(bǔ)充修改。另外可以使用emmet(ZenCoding)語(yǔ)法,這個(gè)沒(méi)有提示,但敲完small,按tab,就會(huì)自動(dòng)生成標(biāo)簽。emmet是一種前端公開(kāi)技術(shù),網(wǎng)上教程很多。
Q:為什么有時(shí)候我輸入代碼塊的名稱(chēng),卻沒(méi)有出現(xiàn)想要的代碼塊?
A:代碼塊的顯示名稱(chēng)和激活字符是不同的,查看激活字符請(qǐng)?jiān)诩せ畲a助手后選擇代碼塊,看右邊信息欄的詳情
Q:編輯器怎么實(shí)現(xiàn)分欄?
A:HBuilder編輯器分欄功能可以實(shí)現(xiàn)左右分欄和上下分欄以及組合分欄。
1、左右分欄實(shí)現(xiàn):鼠標(biāo)點(diǎn)著編輯器選項(xiàng)卡往最右邊拖動(dòng)即可實(shí)現(xiàn)左右分欄
左右分欄實(shí)現(xiàn)效果:
2、上下分欄實(shí)現(xiàn):鼠標(biāo)點(diǎn)著編輯器選項(xiàng)卡往最下邊拖動(dòng)即可實(shí)現(xiàn)上下分欄
上下分欄實(shí)現(xiàn)效果:
3、組合分欄實(shí)現(xiàn):組合分欄就是即有的文件向下拖動(dòng),有的文件向右拖動(dòng),下面給出一個(gè)效果圖,感興趣的話您可以拖個(gè)試試:)
Q:為什么我的代碼明明是對(duì)的卻報(bào)錯(cuò)?
A:HBuilder的語(yǔ)法驗(yàn)證器是集成的三方插件,有可能其本身對(duì)某些寫(xiě)法不兼容,當(dāng)某種語(yǔ)法驗(yàn)證器把正確代碼識(shí)別為錯(cuò)誤時(shí),你可以在工具-選項(xiàng)-HBuilder-Validation中關(guān)掉那個(gè)語(yǔ)法驗(yàn)證器。還可以設(shè)置正則表達(dá)式以兼容這種錯(cuò)誤。
Q:有沒(méi)有快速比較兩個(gè)文件差異的辦法?
A:比較兩個(gè)文檔的方法是,在項(xiàng)目管理器按ctrl選兩個(gè)文件,點(diǎn)右鍵,選比較對(duì)象
Q:不建項(xiàng)目單獨(dú)打開(kāi)文件會(huì)提示有部分功能無(wú)法使用,具體是哪些功能無(wú)法使用?
A:主要是跨文件的項(xiàng)目管理功能受影響。HBuilder會(huì)為項(xiàng)目建立索引,工程間文件的鏈接引用關(guān)系都在管理中。這樣在跨文件引用提示、轉(zhuǎn)到定義、重構(gòu)、移動(dòng)圖片路徑等很多操作中HBuilder都能智能處理。如果單獨(dú)打開(kāi)文件,功能就弱了很多,當(dāng)然也比普通文本編輯器多。
舉個(gè)例子,<a class="classA">,在HBuilder里寫(xiě)class=時(shí),可以提示工程中各種css,classA如果是外部的css文件定義的, 可以按下ctrl點(diǎn)鼠標(biāo)跳轉(zhuǎn)到那個(gè)css中。這都是普通文本編輯器做不到的。
如果您習(xí)慣了資源管理器做項(xiàng)目管理、文本編輯器做代碼編輯,那么建議改變下工作習(xí)慣。用HBuilder做統(tǒng)一的項(xiàng)目管理和文本編輯,你會(huì)發(fā)現(xiàn)工作效率更高。
Q:我安裝了SVN插件為什么我找不到SVN的功能?
A:跟eclipse的svn插件用法是一樣的。在工具-插件安裝中選擇svn插件安裝,安裝完畢后,按提示重啟HBuilder。在菜單文件-導(dǎo)入里,選擇從svn中檢出項(xiàng)目,配置svn地址。在項(xiàng)目管理器中點(diǎn)右鍵-版本管理,里面有svn的各種提交、更新等命令