一，簡介HBuilder
1.1，什么是Hbuilder？
　　HBuilder是DCloud（數字天堂）推出的一款支持HTML5的Web開發IDE。HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫。
　　它基于Eclipse，所以順其自然地兼容了Eclipse的插件
　　從Frontpage、Dreamweaver、UE，到Sublime Text和JetBrains的WebStorm，Web編程的IDE已經更換了幾批。但是HBuilder可以生存就是因為有自身的優勢。

1.2，Hbuilder的優勢是什么？
快，是HBuilder的最大優勢，通過完整的語法提示和代碼輸入法、代碼塊等，大幅提升HTML、js、css的開發效率。

在HBuilder里預置了一個hello HBuilder的工程，用戶敲這幾十行代碼后會發現，
HBuilder比其他開發工具至少快5倍。“最全的瀏覽器兼容性數據、開發手機App等很
多特點也都是HBuilder強于競品的地方”，王安表示。

以“快”為核心的HBuilder，引入了“快捷鍵語法”的概念，巧妙地解決了困擾許多
開發者的快捷鍵過多而記不住的問題。開發者只需要記住幾條語法，就可以快速實現
跳轉、轉義和其他操作。比如alt+[是跳轉到括號，alt+’是跳轉到引號，alt+字母是
跳轉菜單項，而alt+左則是跳轉到上一次光標位置。而Ctrl則是各種操作，比如ctrl+d
就是刪除一行。shift則是轉義，比如shift+回車是
，shift+空格是 。

另外，HBuilder的生態系統可能是最豐富的Web IDE生態系統，因為它同時兼容
Eclipse插件和Ruby Bundle。SVN、git、ftp、PHP、less等各種技術都有Eclipse插件。

HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫，
它基于Eclipse，所以順其自然地兼容了Eclipse的插件。但因為Java效率太低，所以用C
寫了啟動器。HBuilder柔和的綠色界面設計需要動態調節屏幕亮度，它還支持手機數據線
真機聯調，而這些都是用C寫的。

HBuilder很多界面，比如用戶信息界面都是使用Web技術來做的，既漂亮，開發起來
又快。最后，代碼塊、快捷配置命令腳本，都是用Ruby開發的。

“這4種技術各有各的用途，我們團隊內部也靈活運用，HBuilder的架構支持不同的技
術互相融合通信。至于我們的技術選型原則，首先滿足用戶需求，然后我們內部用什么技
術能更快完成就會選什么技術”，王安解釋道。

1.3，目前Web開發領域格局
　　目前主流的前端開發工具有Sublime為代表的文本編輯器，以及Webstorm、Brackets、Dreamweaver、vs等IDE。但說道為HTML5設計或做了特殊優化的，只有HBuilder、Webstorm和Brackets。

文本編輯器以輕快方便的特點獲得了很多用戶的喜愛，但商業項目的編寫缺少IDE還是會很低效。IDE相比文本編輯器最大的特點是擁有語法引擎，能夠識別語言。

編碼比其他工具快5倍夠不夠？對極客而言，追求快，沒有止境！

代碼輸入法：按下數字快速選擇候選項

可編程代碼塊：一個代碼塊，少敲50個按鍵

內置emmet：tab一下生成一串代碼

無死角提示：除了語法，還能提示ID、Class、圖片、鏈接、字體…

跳轉助手、選擇助手，不用鼠標，手不離鍵盤

多種語言支持：php、jsp、ruby、python、nodejs等web語言，less、coffee等編譯型語言均支持

邊改邊看：一邊寫代碼，一邊看效果

強悍的轉到定義和一鍵搜索

這里還有最全的語法庫、最全的語法瀏覽器兼容庫

二，Hbuilder IDE的下載
　　HBuilder下載地址：在HBuilder官網http://www.dcloud.io/點擊免費下載，下載最新版的HBuilder。

HBuilder目前有兩個版本，一個是windows版，一個是mac版。下載的時候根據自己的電腦選擇適合自己的版本。

三，Hbuilder IDE的使用
3.1，設置編譯器風格
　　Hbuilder打開之后，會出現一些很人性話的設置，還有一點就是Hbuilder的編輯器風格是黃色系，對眼睛比較好，不同于其他的編輯器一般是以黑白為主，這里我一般使用標準模式。
　　 四，HBuilder的用法
4.1，什么是代碼塊？
代碼塊是常用的代碼組合，比如在js中輸入$，回車，則可以自動輸入document.getElementById(id)。

查看、編輯代碼塊可以在工具-自定義代碼塊中，選擇相應的代碼塊進行查看和編輯。也可以在激活代碼塊的代碼助手中，點擊詳細信息右下角的修改圖標進行修改和查看。

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

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

代碼塊激活字符原則3:同一個tag，有多個代碼塊輸出，則在最后加后綴。比如meta輸出但metau則輸出，metag同理。

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

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

總結

以上是生活随笔為你收集整理的HBuilder的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。