HBuilderX官方版 v4.08 電腦版

軟件介紹

HBuilderX官方版是一款專門為前端開發打造的Web編程軟件，是經典軟件HBuilder的升級版。HBuilderX可以對HTML文件進行高效編輯，支持JS、jquery、vue等多種程序語言，兼容發大部分瀏覽器數據，能夠在不同內核瀏覽器來進行相關代碼的測試，還擁有強大的代碼助手，只需關鍵詞就為你補全整個代碼規范語句。

HBuilderX官方版的生態系統可能是最豐富的Web IDE生態系統，因為它同時兼容Eclipse插件和Ruby Bundle。SVN、git、ftp、PHP、less等各種技術都有Eclipse插件。讓你可以很方便的管理自己的前端文件和編輯內容，支持語句高亮和標注顯示等功能。

軟件特色

【輕巧、極速】

10M的綠色發行包。

C++架構，啟動速度、大文檔打開速度、編碼提示，都極速響應。

【強大的語法提示】

一流的ast語法分析能力

語法提示精準、全面、細致，轉到定義、重構完善

【專為vue打造】

提供比其他工具更優秀的vue支持

大幅提升你的vue開發效率

【清爽護眼】

界面清爽簡潔，綠柔主題經過科學的腦疲勞測試，最適合人眼長期觀看的主題界面。

保護手腕，減緩鼠標手。

【高效極客操作】

HBuilderX對字處理提供了更崇高的支持。

更強大的多光標、智能雙擊、選區管理...

讓文字處理的效率大幅提升。

【markdown優先】

HX是唯一一個新建文件默認類型是markdown的編輯器，也是對md支持最強的編輯器，你甚至可以直接粘貼表格、圖片進來。

HBuilderX官方版使用方法

一、介紹

1、執著于更快一步的理念，hx的左側項目管理器是單擊響應而不是雙擊。

2、單擊展開目錄，單擊預覽文件，雙擊打開文件。

3、預覽文件時頂部標簽卡是斜體的，此時繼續預覽其他文件會替換預覽標簽卡。雙擊文件后標簽卡為正體，不會被替換。預覽的文件一旦開始編輯，也會自動變為正式打開狀態。

4、項目管理器默認是不顯示圖標的，可以將鼠標移到項目管理器區域，右上角會懸浮菜單，在里面可以選擇顯示圖標

5、HBuilderX支持業內多種圖標插件，可以在工具-插件安裝中找到更多圖標插件。

6、hx的文件保存是免丟失的，并且有熱退出功能。所謂熱退出，就是關閉hx時不要保存文件。再次打開時仍然是之前的狀態。未保存的文件也會繼續原樣展現。

7、hx默認帶有每30秒保存一次臨時文件的策略（可以在設置里調節時間間隔）

8、不管是關閉hx，還是斷電、崩潰，臨時文件始終會自動保存。

9、前端預編譯型語言越來越多，每次保存都觸發編譯比較消耗資源，有了hx，可以專注寫代碼而不需要隔一會按一下ctrl+s，需要編譯時再保存，或編輯多個文件后按ctrl+alt+s全部保存。

二、語法提示

擁有自研的世界級語法分析引擎一直是HBuilder系列產品傲視業內的資本。 但前端框架眾多，框架的語法提示需要加載單獨的語法提示庫。

框架語法提示庫是在頁面的右下角選擇。

注意：

1、框架語法庫是掛在項目下的，一個項目加載了一個框架語法庫后，這個項目下所有js文件或HTML文件都會在代碼助手提示這個框架的語法。

2、但如果一個文件是單獨從硬盤打開，沒有整項目拖入hx，那么此時無法加載框架語法庫。

三、 代碼助手

hx的代碼助手，可以按alt+數字選擇直接選擇某個項目，類似中文輸入法數字選詞

四、語法幫助

光標放到某api處，按下F1，就可跳轉到這個api的官方手冊。目前支持vue、uni-app、5+等api

注：此功能僅適用于2.5.7以下版本，2.5.7.20200116-alpha+版本，按F1查看幫助文檔，改為打開外部瀏覽器，避免對邊改邊看造成影響

五、編輯器與項目管理器的同步

hx默認是打開的標簽卡和項目管理器自動關聯，切換標簽卡時項目管理器也會跟隨變化，如不需要此功能，可以將鼠標移到項目管理器區域，右上角會懸浮菜單，在里面可以取消“與編輯器同步”。

一般多項目時建議取消同步功能。

取消同步后，如需手動定位標簽卡所在的項目，可以對編輯器點右鍵-“在項目管理器中定位”。

六、多光標

1、hx支持多光標，按 ctrl+鼠標左鍵 就可增加一個光標，ctrl+鼠標右鍵 可取消一個光標或選區。/7

2、還可以選擇相同詞。ctrl+e (mac是cmd+d)可選中相同的詞做批處理。

七、列選擇

hx的列選擇，是alt+鼠標拖選?；蛘哂每旖萱Ictrl+alt+↑或↓。

八、選擇編碼、著色高亮

當你打開一個不認識的文檔時，即hx的無法高亮著色，可以在右下角選擇使用其他編輯器打開。

當你打開一個文件編碼錯亂，產生亂碼時，也可以在右下角選擇編碼重新打開。

九、轉到定義

轉到定義是非常常用的功能，普通編輯器不長于此，只能猜單詞跳轉。

HBuilderX有強大的語法分析引擎，可以準確的跳轉定義位置。

轉到定義的快捷鍵是Alt+d，鼠標操作是alt+左鍵單擊（注意不是ctrl，因為ctrl留給了多光標）

而HBuilderX還有一個特色是轉到定義到分欄，ctrl+alt+左鍵，可以把一個定義處的代碼打開在另一側，方便共同查看

如何回到上一個光標位置？

在HBuilderX中，Alt+Left或點擊工具欄上的<, 即可回到上一個光標位置。

備注：支持切換【Ctrl+鼠標左鍵】或【Alt+鼠標左鍵】進行轉到定義 （菜單【選擇】，最后一個菜單）。

十、文件快速打開

在頂部工具欄直接搜索工程下的文件名并打開，或者使用快捷鍵ctrl+p。

比較常用的文件，可以在工具欄里添加到收藏夾。

ctrl+p也是標簽卡管理的重要工具，屏幕窄看不清左右打開的標簽時，可以用它來瀏覽所有以打開的標簽

十一、目錄內搜索

項目管理器點右鍵，選：查找字符串(當前目錄)，可在該目錄下所有文件中搜索字符串

十二、hx默認使用tab縮進，tab長度為4個空格。

如果你需要調整縮進長度，比如tab長度為2個空格，在工具設置-編輯器中調整。

如果不喜歡使用tab而喜歡使用空格，也可以在設置中調。注意這個調節只是編輯器里敲tab按鍵時轉為了空格，格式化時仍是tab。

調節格式化設置，參考菜單工具-插件配置。hx支持幾種格式化插件，他們都有自己的配置定義文件，請按插件配置中的說明修改設置。

比如格式化插件Formator-Prettier，它的配置文件為：【工具】【插件配置】【formator-frettier】【formator.config.js】

在菜單編輯-縮進中，可文件的縮進從tab轉空格或從空格轉tab。

十三、語法校驗

hx的語法校驗都是插件，在工具插件安裝中選擇各種校驗插件，不同語言的校驗插件不一樣。安裝校驗插件后，保存文件時會自動執行語法校驗。

校驗概要結果會顯示在狀態欄，比如有2個錯誤（如下圖），可以按F4切換到不同的錯誤處，畫有紅波浪線（如下圖），鼠標移到紅波浪線上會顯示具體的錯誤信息。

你也可以不保存，直接點菜單工具-驗證本文檔校驗語法 來進行校驗。

HBuilderX官方版常見問題

Q:怎么實現代碼追蹤？

A:在編輯代碼時經常會出現需要跳轉到引用文件或者變量定義的地方，HBuilder提供了一個非常好用的代碼追蹤功能，

只需要按住Alt+鼠標左鍵即可實現追蹤。

Q:編輯器怎么實現分欄？

A:HBuilder編輯器分欄功能可以實現左右分欄和上下分欄以及組合分欄。

1、左右分欄實現：鼠標點著編輯器選項卡往最右邊拖動 到最小化按鈕部分 即可實現左右分欄

左右分欄實現效果：

2、上下分欄實現：鼠標點著編輯器選項卡往最下邊拖動 到左右滾動條處 即可實現上下分欄

上下分欄實現效果：

3、組合分欄實現：組合分欄就是即有的文件向下拖動，有的文件向右拖動，下面給出一個效果圖，

感興趣的話您可以拖個試試：

Q:有沒有快速比較兩個文件差異的辦法？

A:比較兩個文檔的方法是，在項目管理器按ctrl選兩個文件，點右鍵，選比較對象

點擊查找-歷史版本比較，里邊保存有改=該文件的所有歷史版本代碼