HBuilderX官方版 v4.08 電腦版

軟件介紹

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

HBuilderX官方版的生態(tài)系統(tǒng)可能是最豐富的Web IDE生態(tài)系統(tǒng)，因?yàn)樗瑫r(shí)兼容Eclipse插件和Ruby Bundle。SVN、git、ftp、PHP、less等各種技術(shù)都有Eclipse插件。讓你可以很方便的管理自己的前端文件和編輯內(nèi)容，支持語(yǔ)句高亮和標(biāo)注顯示等功能。

軟件特色

【輕巧、極速】

10M的綠色發(fā)行包。

C++架構(gòu)，啟動(dòng)速度、大文檔打開速度、編碼提示，都極速響應(yīng)。

【強(qiáng)大的語(yǔ)法提示】

一流的ast語(yǔ)法分析能力

語(yǔ)法提示精準(zhǔn)、全面、細(xì)致，轉(zhuǎn)到定義、重構(gòu)完善

【專為vue打造】

提供比其他工具更優(yōu)秀的vue支持

大幅提升你的vue開發(fā)效率

【清爽護(hù)眼】

界面清爽簡(jiǎn)潔，綠柔主題經(jīng)過科學(xué)的腦疲勞測(cè)試，最適合人眼長(zhǎng)期觀看的主題界面。

保護(hù)手腕，減緩鼠標(biāo)手。

【高效極客操作】

HBuilderX對(duì)字處理提供了更崇高的支持。

更強(qiáng)大的多光標(biāo)、智能雙擊、選區(qū)管理...

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

【markdown優(yōu)先】

HX是唯一一個(gè)新建文件默認(rèn)類型是markdown的編輯器，也是對(duì)md支持最強(qiáng)的編輯器，你甚至可以直接粘貼表格、圖片進(jìn)來。

HBuilderX官方版使用方法

一、介紹

1、執(zhí)著于更快一步的理念，hx的左側(cè)項(xiàng)目管理器是單擊響應(yīng)而不是雙擊。

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

3、預(yù)覽文件時(shí)頂部標(biāo)簽卡是斜體的，此時(shí)繼續(xù)預(yù)覽其他文件會(huì)替換預(yù)覽標(biāo)簽卡。雙擊文件后標(biāo)簽卡為正體，不會(huì)被替換。預(yù)覽的文件一旦開始編輯，也會(huì)自動(dòng)變?yōu)檎酱蜷_狀態(tài)。

4、項(xiàng)目管理器默認(rèn)是不顯示圖標(biāo)的，可以將鼠標(biāo)移到項(xiàng)目管理器區(qū)域，右上角會(huì)懸浮菜單，在里面可以選擇顯示圖標(biāo)

5、HBuilderX支持業(yè)內(nèi)多種圖標(biāo)插件，可以在工具-插件安裝中找到更多圖標(biāo)插件。

6、hx的文件保存是免丟失的，并且有熱退出功能。所謂熱退出，就是關(guān)閉hx時(shí)不要保存文件。再次打開時(shí)仍然是之前的狀態(tài)。未保存的文件也會(huì)繼續(xù)原樣展現(xiàn)。

7、hx默認(rèn)帶有每30秒保存一次臨時(shí)文件的策略（可以在設(shè)置里調(diào)節(jié)時(shí)間間隔）

8、不管是關(guān)閉hx，還是斷電、崩潰，臨時(shí)文件始終會(huì)自動(dòng)保存。

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

二、語(yǔ)法提示

擁有自研的世界級(jí)語(yǔ)法分析引擎一直是HBuilder系列產(chǎn)品傲視業(yè)內(nèi)的資本。 但前端框架眾多，框架的語(yǔ)法提示需要加載單獨(dú)的語(yǔ)法提示庫(kù)。

框架語(yǔ)法提示庫(kù)是在頁(yè)面的右下角選擇。

注意：

1、框架語(yǔ)法庫(kù)是掛在項(xiàng)目下的，一個(gè)項(xiàng)目加載了一個(gè)框架語(yǔ)法庫(kù)后，這個(gè)項(xiàng)目下所有js文件或HTML文件都會(huì)在代碼助手提示這個(gè)框架的語(yǔ)法。

2、但如果一個(gè)文件是單獨(dú)從硬盤打開，沒有整項(xiàng)目拖入hx，那么此時(shí)無法加載框架語(yǔ)法庫(kù)。

三、 代碼助手

hx的代碼助手，可以按alt+數(shù)字選擇直接選擇某個(gè)項(xiàng)目，類似中文輸入法數(shù)字選詞

四、語(yǔ)法幫助

光標(biāo)放到某api處，按下F1，就可跳轉(zhuǎn)到這個(gè)api的官方手冊(cè)。目前支持vue、uni-app、5+等api

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

五、編輯器與項(xiàng)目管理器的同步

hx默認(rèn)是打開的標(biāo)簽卡和項(xiàng)目管理器自動(dòng)關(guān)聯(lián)，切換標(biāo)簽卡時(shí)項(xiàng)目管理器也會(huì)跟隨變化，如不需要此功能，可以將鼠標(biāo)移到項(xiàng)目管理器區(qū)域，右上角會(huì)懸浮菜單，在里面可以取消“與編輯器同步”。

一般多項(xiàng)目時(shí)建議取消同步功能。

取消同步后，如需手動(dòng)定位標(biāo)簽卡所在的項(xiàng)目，可以對(duì)編輯器點(diǎn)右鍵-“在項(xiàng)目管理器中定位”。

六、多光標(biāo)

1、hx支持多光標(biāo)，按 ctrl+鼠標(biāo)左鍵 就可增加一個(gè)光標(biāo)，ctrl+鼠標(biāo)右鍵 可取消一個(gè)光標(biāo)或選區(qū)。/7

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

七、列選擇

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

八、選擇編碼、著色高亮

當(dāng)你打開一個(gè)不認(rèn)識(shí)的文檔時(shí)，即hx的無法高亮著色，可以在右下角選擇使用其他編輯器打開。

當(dāng)你打開一個(gè)文件編碼錯(cuò)亂，產(chǎn)生亂碼時(shí)，也可以在右下角選擇編碼重新打開。

九、轉(zhuǎn)到定義

轉(zhuǎn)到定義是非常常用的功能，普通編輯器不長(zhǎng)于此，只能猜單詞跳轉(zhuǎn)。

HBuilderX有強(qiáng)大的語(yǔ)法分析引擎，可以準(zhǔn)確的跳轉(zhuǎn)定義位置。

轉(zhuǎn)到定義的快捷鍵是Alt+d，鼠標(biāo)操作是alt+左鍵單擊（注意不是ctrl，因?yàn)閏trl留給了多光標(biāo)）

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

如何回到上一個(gè)光標(biāo)位置？

在HBuilderX中，Alt+Left或點(diǎn)擊工具欄上的<, 即可回到上一個(gè)光標(biāo)位置。

備注：支持切換【Ctrl+鼠標(biāo)左鍵】或【Alt+鼠標(biāo)左鍵】進(jìn)行轉(zhuǎn)到定義 （菜單【選擇】，最后一個(gè)菜單）。

十、文件快速打開

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

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

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

十一、目錄內(nèi)搜索

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

十二、hx默認(rèn)使用tab縮進(jìn)，tab長(zhǎng)度為4個(gè)空格。

如果你需要調(diào)整縮進(jìn)長(zhǎng)度，比如tab長(zhǎng)度為2個(gè)空格，在工具設(shè)置-編輯器中調(diào)整。

如果不喜歡使用tab而喜歡使用空格，也可以在設(shè)置中調(diào)。注意這個(gè)調(diào)節(jié)只是編輯器里敲tab按鍵時(shí)轉(zhuǎn)為了空格，格式化時(shí)仍是tab。

調(diào)節(jié)格式化設(shè)置，參考菜單工具-插件配置。hx支持幾種格式化插件，他們都有自己的配置定義文件，請(qǐng)按插件配置中的說明修改設(shè)置。

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

在菜單編輯-縮進(jìn)中，可文件的縮進(jìn)從tab轉(zhuǎn)空格或從空格轉(zhuǎn)tab。

十三、語(yǔ)法校驗(yàn)

hx的語(yǔ)法校驗(yàn)都是插件，在工具插件安裝中選擇各種校驗(yàn)插件，不同語(yǔ)言的校驗(yàn)插件不一樣。安裝校驗(yàn)插件后，保存文件時(shí)會(huì)自動(dòng)執(zhí)行語(yǔ)法校驗(yàn)。

校驗(yàn)概要結(jié)果會(huì)顯示在狀態(tài)欄，比如有2個(gè)錯(cuò)誤（如下圖），可以按F4切換到不同的錯(cuò)誤處，畫有紅波浪線（如下圖），鼠標(biāo)移到紅波浪線上會(huì)顯示具體的錯(cuò)誤信息。

你也可以不保存，直接點(diǎn)菜單工具-驗(yàn)證本文檔校驗(yàn)語(yǔ)法 來進(jìn)行校驗(yàn)。

HBuilderX官方版常見問題

Q:怎么實(shí)現(xiàn)代碼追蹤？

A:在編輯代碼時(shí)經(jīng)常會(huì)出現(xiàn)需要跳轉(zhuǎn)到引用文件或者變量定義的地方，HBuilder提供了一個(gè)非常好用的代碼追蹤功能，

只需要按住Alt+鼠標(biāo)左鍵即可實(shí)現(xiàn)追蹤。

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) 到左右滾動(dòng)條處 即可實(shí)現(xiàn)上下分欄

上下分欄實(shí)現(xiàn)效果：

3、組合分欄實(shí)現(xiàn)：組合分欄就是即有的文件向下拖動(dòng)，有的文件向右拖動(dòng)，下面給出一個(gè)效果圖，

感興趣的話您可以拖個(gè)試試：

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

A:比較兩個(gè)文檔的方法是，在項(xiàng)目管理器按ctrl選兩個(gè)文件，點(diǎn)右鍵，選比較對(duì)象

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