HBuilder是DCloud（數字天堂）推出的一款支持HTML5的Web開發IDE。HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫，它基於Eclipse，所以順其自然地兼容了Eclipse的插件。
快，是HBuilder的最大優勢，通過完整的語法提示和代碼輸入法、代碼塊等，大幅提升HTML、js、css的開發效率。
HBuilderX提供了更友好方式：智能雙擊和Ctrl+=擴大選區。
智能雙擊
下面是智能雙擊選中tag和包圍父tag的示例
1. 雙擊div的首或尾可以選中這個tag。當然雙擊if、雙擊縮進符、雙擊括號引號內側...很多位置都可以通過智能雙擊選中。具體見HBuilder的選擇菜單。
2. 按Ctrl+]包圍，就可以在這個選區首尾加父標簽，同時閃爍光標。當前在js里按下Ctrl+]不會包圍tag，而是包圍if、for等函數庫。
3. 輸入div即可在首尾添加包圍標簽
擴大選區Ctrl+=
=是+的默認鍵位置，所以Ctrl+=其實就是Ctrl鍵和+號一起按下。
在HBuilderX里可以智能的判斷選區范圍，持續擴大選區，無鼠標快速選中你需要的選區。
反包圍
上面講到包圍，也自然有反包圍。
1. 雙擊tag p開頭，選中該tag。
2. 按反包圍Ctrl+Shift+]，可去掉tag p並自動處理子節點的縮進。
這里多提一句HBuilderX的快捷鍵理念，就是符號化，而不是字母化。
很多工具的快捷鍵都是控制鍵+功能英文單詞中的一個字母，這個是極難記憶的。
符號化讓快捷鍵的記憶變簡單，比如Ctrl+]是包圍。
而反操作或增強操作一般是加Shift，比如Ctrl+Shift+]是反包圍。
選中相同語法詞
1. 下圖中，使用普通的選擇相同詞，會把所有div都選中。但使用Ctrl+Shift+e（mac是Command+Shift+d），會智能識別語法，剔除不相干的詞。
2. 下圖按下Ctrl+Shift+e同時選中tag首尾的div，而不會選中子節點的div。
3. 然后就可以方便的將原div改名為p
選擇一個括號時，也可以使用選中相同語法詞，來選中對應的另一個括號
交換選區內容
當需要交互2個選區的內容時，選中a、剪切、點b前面、粘貼、選中b、找到之前a的位置點擊、粘貼...這么長的操作太低效。
來看HBuilderX的Ctrl+Shift+x交互選區，也就是Ctrl+x的增強版。
1. 雙擊第1個style屬性后的引號內側，可選中引號內容。
2. 按下Ctrl后繼續雙擊第2個style屬性后的引號內側，可選中2個引號內的選區。
3. 按下Ctrl+Shift+x，交換style屬性的內容。
如果不選擇內容，光標放置到2行，可直接交換這2行的內容，如下圖
撤銷最后一個多選區或多光標
選區選多了或選錯了，不用擔心要重頭選，Ctrl+Shift+z不是撤銷編輯內容，而是撤銷最后一個選區。
1. 雙擊選中class
2. 按Ctrl+e選中相同詞
3. 按Ctrl+Shift+z，不再選中最后一個詞。
批量合並行
下圖示例，是把css合並為一行時的快捷操作
1. 雙擊{內側選中class
2. 按Ctrl+雙擊選中另一個class
3. 按反格式化Ctrl+Shift+k，可以把每個css的區塊代碼都合並為一行
Ctrl+k是格式化代碼，那么Ctrl+Shift+k就是合並為一行。
同時注釋if段首尾
if塊的調整很常見，除了包圍、反包圍外，常用操作還有同時注釋掉if段首尾。
1. 雙擊if選中if代碼塊
2. 按Ctrl+\在選區首尾加光標，變成多光標模式
3. 按Ctrl+/注釋掉選區首尾行
幫助開發者成為極客，一直是HBuilder的理念。HBuilderX更上一層樓。
使用：
一、准備工作：
1.新建項目：
依次點擊文件——>新建——>選擇Web項目（快捷鍵：Ctrl+N,W）
2.創建HTML頁面：
在項目資源管理器中選擇剛才新建的項目，依次點擊文件——>新建——>選擇HTML文件，並選擇空白文件模板，如圖：
二、實時查看編程效果
win系統按下Ctrl+P進入邊改邊看模式，如果當前打開的是HTML文件，每次保存均會自動刷新以顯示當前頁面效果。如果為JA、CSS文件，如與當前瀏覽器視圖打開的頁面有引用關系，也會刷新。
三、代碼塊大量減少重復代碼工作量
在打開的getstart.html輸入h，如下圖，
然后按下8，自動生成HTML的基本代碼如下：
四、快捷鍵
輸入sc，自動出現script，回車即可，非常方便。
五、強大的JS解析引擎大大加快JS開發速度
1.提示HTML、CSS、JSON
2.提示自定義系統方法
3.提示閉包
六、跳轉到class、id、js方法定義處
首先去官網把 HBuilder 下載下來，http://www.dcloud.io/ ，是個解壓包，都不需要安裝，放到你指定的位置就行，有Windows版和Mac版，兩者版本操作都差不多，只是一個是調試Android的，一個是調試IOS的，基本上調試一個版本就可以了，因為最后發布出去的App都一樣，很少有不一樣的情況，我在開發中遇到了一個不一樣的情況就是Android對Url不區分大小寫，而IOS就區分，導致IOS引用的文件不加載，由於此工具開發出來的是完全靜態的Html文件，只有javascript代碼，所以需要后台開發做支撐，我這里選用了MVC作為數據后台，差點忘了，需要調試IOS你還需要一台Mac電腦，O(∩_∩)O~
打開HBuilder
我的第一個App
首先你可以創建一個例子來完整的試試效果，不必着急寫后台代碼，HBuilder 提供了2個例子，一個是登錄，一個是MUI介紹，MUI是DCloud 開發的前端框架，你也可以使用其他的框架，我們來創建一個MUI的例子，
點擊 文件-新建-移動App，在彈出框中輸入項目名稱，選擇下面的 Hello mui 實例
這個時候你就可以把手機插上電腦，見證奇跡的時刻，點擊 運行-手機運行，
你會發現什么都沒有， W(￣_￣)W，別急，Android手機需要用手機助手安裝驅動，這個簡單，但是iPhone就需要安裝插件和下載iTunes了，你會發現iPhone很難伺候呀，呵呵，確實iPhone更難的還在后面呢，Windows下你可以把App植入到iPhone，但是網頁代碼不能調試，需要Mac版的才可以哦
點擊 工具-插件安裝 ，選擇IOS連接插件，點擊安裝，再安裝iTunes
再次點擊手機運行，發現手機出現啦，又一次見證奇跡的時刻到了，點擊你要調試的手機
然后會在你桌面出現一個 HBuilder 的App，Android的用戶可以直接打開，但是iPhone的用戶先點擊App，會提出一行提示，按照提示操作一下就可以進入了
哇，我開發的第一個App，O(∩_∩)O~
配置源代碼管理
我們公司使用的TFS源代碼管理，HBuilder 支持TFS和SVN，我這里只介紹TFS的配置，其他的大家可以自己研究
點擊 工具-插件安裝，在彈出框中我們可以看到有SVN的插件，但是這里我需要TFS，點擊 瀏覽Eclipse插件市場，搞Java的人對Eclipse應該很熟悉吧
在市場中搜索TFS，找到第一個就是的哦，點擊Install，然后等待下載，后面就是下一步下一步就可以了
重啟 HBuilder 后發現找不到 TFS配置的話，請點擊 視圖-顯示視圖-其他...
找到團隊資源管理器，點擊確定，下面的操作就和在VS中配置一樣了
連接公司的TFS服務器
在你自己項目上右鍵-版本管理-共享項目...，在彈出框選擇自己的項目目錄就可以啦
最后就可以看到我們熟悉的菜單啦
