HBuilderX綠色版3.4.7 最新免安裝版

編輯點(diǎn)評(píng)：支持HTML5的Web開發(fā)IDE

軟件開發(fā)者必備的神器，HBuilderX是一個(gè)很神奇的工具，支持極客開發(fā)，可多端覆蓋，支持js開發(fā)服務(wù)端，多種模式可以自由選擇，更方便的管理和操作，輕松打包你想要的應(yīng)用工具。

使用教程加演示

使用HBuilder新建項(xiàng)目

依次點(diǎn)擊文件→新建→選擇Web項(xiàng)目(按下Ctrl+N,W可以觸發(fā)快速新建(MacOS請(qǐng)使用Command+N,然后左鍵點(diǎn)擊Web項(xiàng)目))

如上圖，請(qǐng)?jiān)贏處填寫新建項(xiàng)目的名稱，B處填寫(或選擇)項(xiàng)目保存路徑(更改此路徑HBuilder會(huì)記錄，下次默認(rèn)使用更改后的路徑)，C處可選擇使用的模板(可點(diǎn)擊自定義模板,參照打開目錄中的readme.txt自定義模板)

使用HBuilder創(chuàng)建HTML頁(yè)面

在項(xiàng)目資源管理器中選擇剛才新建的項(xiàng)目,依次點(diǎn)擊文件→新建→選擇HTML文件(按下Ctrl+N,W可以觸發(fā)快速新建(MacOS請(qǐng)使用Command+N,然后左鍵點(diǎn)擊HTML文件)),并選擇空白文件模板,如下圖

使用HBuilder邊改邊看試試查看編程效果

win系統(tǒng)按下Ctrl+P(MacOS為Command+P)進(jìn)入邊改邊看模式,在此模式下,如果當(dāng)前打開的是HTML文件，每次保存均會(huì)自動(dòng)刷新以顯示當(dāng)前頁(yè)面效果(若為JS、CSS文件，如與當(dāng)前瀏覽器視圖打開的頁(yè)面有引用關(guān)系，也會(huì)刷新)

HBuilder代碼塊大量減少重復(fù)代碼工作量

在打開的getstart.html中輸入H,如下圖

然后按下8,自動(dòng)生成HTML的基本代碼如下圖

靈活的快捷鍵使得編程過(guò)程手不離鍵盤

效果如下圖

新建html基本模板后,當(dāng)前光標(biāo)處于title標(biāo)簽內(nèi),此時(shí)我們給HTML設(shè)置title:hellohbuilder,完成后使用Ctrl+回車在當(dāng)前的下一行插入空行,并將光標(biāo)移動(dòng)到下一行

我們?cè)诖颂幨褂胹c代碼塊生成一個(gè)script塊來(lái)編寫js代碼(輸入sc,回車)如下圖

使用funn代碼塊編寫一個(gè)JS方法helloworld(輸入funn,回車)如下圖

此時(shí)生成的方法的方法名是選中狀態(tài),我們只需要直接輸入新的方法名helloworld即可,如下圖

上圖中的綠色豎線，是代碼塊中指定的下一個(gè)編輯位置,敲擊回車光標(biāo)會(huì)直接跳轉(zhuǎn)至豎線位置

此時(shí)按向下、向下,Ctrl+回車,輸入style回車,生成css代碼區(qū)域

定義一個(gè)Css類classA：輸入. c l a s s A { 回車,f o n t 回車 回車 回車

然后按alt+下,alt+下跳轉(zhuǎn)至下一個(gè)編輯區(qū)域

依次輸入< d i v 也可輸入<dv回車、<iv回車,語(yǔ)法助手可以通過(guò)模糊匹配獲知想要生成的標(biāo)簽)如下圖

如上圖所示,代碼助手左側(cè)包含數(shù)字，可以使用這些數(shù)字選擇對(duì)應(yīng)的條目,右側(cè)包含瀏覽器兼容性數(shù)據(jù)及示例

輸入i 回車 d 1,右箭頭,空格,c 回車 回車

鼠標(biāo)在div標(biāo)簽的class屬性classA上懸浮,按下Alt和左鍵,點(diǎn)擊后可跳轉(zhuǎn)至classA定義處

Ctrl+回車

div也可以通過(guò)代碼塊生成如輸入divc回車回車回車,輸入helloworld如下圖

向下,回車

使用CSS選擇器語(yǔ)法來(lái)快速開發(fā)HTML和CSS(支持Emmet)

輸入div#page>div.logo+ul#navigation>li*2>a,按下tab生成代碼如下圖

HBuilder集成了Emmet功能,可以通過(guò)CSS選擇器語(yǔ)法來(lái)快速開發(fā)HTML和CSS,如想深入了解Emmet請(qǐng)移步http://www.emmet.io/

強(qiáng)大的JS解析引擎大大加快JS開發(fā)的速度

JS中提示HTML、CSS

JS提示html的ID

JS提示html的tagname

JS提示css類名

JS通過(guò)ID、tagname、css類名不但可以獲取HTML元素,還可以精確分析出其元素類型,準(zhǔn)確提示其屬性,如上圖可以提示出list[0].type

JS中提示JSON

JS提示自定義系統(tǒng)方法

JS提示對(duì)象引用及其屬性、方法

JS提示閉包對(duì)象

跳轉(zhuǎn)到class、id、js方法定義處

按下Alt,左鍵點(diǎn)擊引用的方法名、ID、CSS類、文件(鏈接、圖片),均可跳轉(zhuǎn)到引用的地方,跨文件的引用也可以哦

跳轉(zhuǎn)到JS方法定義處 如下圖

跳轉(zhuǎn)到CSS類定義處 如下圖

跳轉(zhuǎn)到ID定義處 如下圖

跳轉(zhuǎn)到文件 如下圖

主要功能

1.輕巧

僅10余M的綠色發(fā)行包(不含插件)

2.極速

不管是啟動(dòng)速度、大文檔打開速度、編碼提示，都極速響應(yīng)

C++的架構(gòu)性能遠(yuǎn)超Java或Electron架構(gòu)

3.vue開發(fā)強(qiáng)化

`HX`對(duì)vue做了大量?jī)?yōu)化投入，開發(fā)體驗(yàn)遠(yuǎn)超其他開發(fā)工具

按下Alt+鼠標(biāo)左鍵可直接打開網(wǎng)址

4.小程序支持

國(guó)外開發(fā)工具沒(méi)有對(duì)中國(guó)的小程序開發(fā)優(yōu)化，`HX`可開發(fā)`uni-app`或`小程序`、`快應(yīng)用`等項(xiàng)目，為國(guó)人提供更高效工具

5.markdown利器

`HX`是唯一一個(gè)新建文件默認(rèn)類型是markdown的編輯器，也是對(duì)md支持最強(qiáng)的編輯器

`HX`為md強(qiáng)化了眾多功能，請(qǐng)**務(wù)必點(diǎn)擊**【菜單-幫助-markdown語(yǔ)法示例】，快速掌握md及`HX`的強(qiáng)化技巧！

6.清爽護(hù)眼

HX的界面比其他工具更清爽簡(jiǎn)潔，綠柔主題經(jīng)過(guò)科學(xué)的腦疲勞測(cè)試，是最適合人眼長(zhǎng)期觀看的主題界面

7.強(qiáng)大的語(yǔ)法提示

`HX`是中國(guó)唯一一家擁有自主IDE語(yǔ)法分析引擎的公司，對(duì)前端語(yǔ)言提供準(zhǔn)確的代碼提示和轉(zhuǎn)到定義(Alt+鼠標(biāo)左鍵)

8.高效極客工具

更強(qiáng)大的多光標(biāo)、智能雙擊...讓字處理的效率大幅提升

9.更強(qiáng)的json支持

現(xiàn)代js開發(fā)中大量json結(jié)構(gòu)的寫法，`HX`提供了比其他工具更高效的操作。

常見(jiàn)問(wèn)題

什么是代碼塊?

代碼塊是常用的代碼組合，比如在js中輸入$，回車，則可以自動(dòng)輸入document.getElementById(id)。

查看、編輯代碼塊可以在工具-自定義代碼塊中，選擇相應(yīng)的代碼塊進(jìn)行查看和編輯。也可以在激活代碼塊的代碼助手中，點(diǎn)擊詳細(xì)信息右下角的修改圖標(biāo)進(jìn)行修改和查看。

代碼塊激活字符原則1:連續(xù)單詞的首字母。比如：dg激活document.getElementById("");vari激活var i=0;dn激活display: none;

代碼塊激活字符原則2:整段HTML一般使用tag的名稱。比如script、style，通常，敲最多4個(gè)字母即可匹配到需要的代碼塊，不需要完整錄入，如sc回車、st回車，即可完成script、style標(biāo)簽的輸入。

代碼塊激活字符原則3:同一個(gè)tag，有多個(gè)代碼塊輸出，則在最后加后綴。比如 meta 輸出 <meta name="" content=""/> 但 metau 則輸出 <meta charset="UTF-8"/>，metag同理。

代碼塊激活字符原則4:如果原始語(yǔ)法超過(guò)4個(gè)字符，針對(duì)常用語(yǔ)法，則第一個(gè)單詞的激活符使用縮寫。比如input button，縮寫為inbutton，同理intext是輸入框。

代碼塊激活字符原則5:js的關(guān)鍵字代碼塊，是在關(guān)鍵字最后加一個(gè)重復(fù)字母。比如if直接敲會(huì)提示if關(guān)鍵字，但iff回車，則出現(xiàn)if代碼塊。類似的有forr、withh等。由于funtion字母較長(zhǎng)，為加快輸入速度，取fun縮寫，比如funn，輸出function代碼塊，而funa和func，分別輸出匿名函數(shù)和閉包。