1. 介紹
執着於更快一步的理念,hx的左側項目管理器是單擊響應而不是雙擊。
單擊展開目錄,單擊預覽文件,雙擊打開文件。
預覽文件時頂部標簽卡是斜體的,此時繼續預覽其他文件會替換預覽標簽卡。雙擊文件后標簽卡為正體,不會被替換。預覽的文件一旦開始編輯,也會自動變為正式打開狀態。
預覽文件
項目管理器默認是不顯示圖標的,可以將鼠標移到項目管理器區域,右上角會懸浮菜單,在里面可以選擇顯示圖標。HBuilderX支持業內多種圖標插件,可以在工具-插件安裝中找到更多圖標插件。
hx的文件保存是免丟失的,並且有熱退出功能。所謂熱退出,就是關閉hx時不要保存文件。再次打開時仍然是之前的狀態。未保存的文件也會繼續原樣展現。
hx默認帶有每30秒保存一次臨時文件的策略(可以在設置里調節時間間隔)
不管是關閉hx,還是斷電、崩潰,臨時文件始終會自動保存。
前端預編譯型語言越來越多,每次保存都觸發編譯比較消耗資源,有了hx,可以專注寫代碼而不需要隔一會按一下ctrl+s,需要編譯時再保存,或編輯多個文件后按ctrl+alt+s全部保存。
2. 語法提示
擁有自研的世界級語法分析引擎一直是HBuilder系列產品傲視業內的資本。
但前端框架眾多,框架的語法提示需要加載單獨的語法提示庫。
框架語法提示庫是在頁面的右下角選擇。(如下圖示例)
注意:
框架語法庫是掛在項目下的,一個項目加載了一個框架語法庫后,這個項目下所有js文件或HTML文件都會在代碼助手提示這個框架的語法。
但如果一個文件是單獨從硬盤打開,沒有整項目拖入hx,那么此時無法加載框架語法庫。
3. 代碼助手
hx的代碼助手,可以按alt+數字選擇直接選擇某個項目,類似中文輸入法數字選詞 (如下圖示例)
4. 語法幫助
光標放到某api處,按下F1,就可跳轉到這個api的官方手冊。目前支持vue、uni-app、5+等api (如下圖示例)
5. 編輯器與項目管理器的同步
hx默認是打開的標簽卡和項目管理器自動關聯,切換標簽卡時項目管理器也會跟隨變化,如不需要此功能,可以將鼠標移到項目管理器區域,右上角會懸浮菜單,在里面可以取消“與編輯器同步”。(如下圖示例)
編輯器同步
一般多項目時建議取消同步功能。
取消同步后,如需手動定位標簽卡所在的項目,可以對編輯器點右鍵-“在項目管理器中定位”。(如下圖示例)
項目管理器定位
6. 多光標
hx支持多光標,按 ctrl+鼠標左鍵 就可增加一個光標,ctrl+鼠標右鍵 可取消一個光標或選區。(如下圖示例)
多光標
還可以選擇相同詞。ctrl+e (mac是cmd+d)可選中相同的詞做批處理。(如下圖示例)
選擇相同詞
多光標是極客必備工具,高級技巧請參考:https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/13191
7. 列選擇
hx的列選擇,是alt+鼠標拖選。或者用快捷鍵ctrl+alt+↑或↓。(如下圖示例)
列選擇
8. 選擇編碼、着色高亮
當你打開一個不認識的文檔時,即hx的無法高亮着色,可以在右下角選擇使用其他編輯器打開。
當你打開一個文件編碼錯亂,產生亂碼時,也可以在右下角選擇編碼重新打開。(如下圖示例)
編碼
9. 轉到定義
轉到定義是非常常用的功能,普通編輯器不長於此,只能猜單詞跳轉。
HBuilderX有強大的語法分析引擎,可以准確的跳轉定義位置。
轉到定義的快捷鍵是Alt+d,鼠標操作是alt+左鍵單擊(注意不是ctrl,因為ctrl留給了多光標)
轉到定義
而HBuilderX還有一個特色是轉到定義到分欄,ctrl+alt+左鍵,可以把一個定義處的代碼打開在另一側,方便共同查看
轉到定義到分欄
如何回到上一個光標位置?
在HBuilderX中,Alt+Left或點擊工具欄上的<, 即可回到上一個光標位置。
備注:支持切換【Ctrl+鼠標左鍵】或【Alt+鼠標左鍵】進行轉到定義 (菜單【選擇】,最后一個菜單)。
切換
10. 文件快速打開
在頂部工具欄直接搜索工程下的文件名並打開,或者使用快捷鍵ctrl+p。(如下圖示例)
搜索文件
比較常用的文件,可以在工具欄里添加到收藏夾。(如下圖示例)
收藏文件
ctrl+p也是標簽卡管理的重要工具,屏幕窄看不清左右打開的標簽時,可以用它來瀏覽所有以打開的標簽
11. 目錄內搜索
項目管理器點右鍵,選:查找字符串(當前目錄),可在該目錄下所有文件中搜索字符串(如下圖示例)
按目錄查找字符串
12. 縮進調整
hx默認使用tab縮進,tab長度為4個空格。
如果你需要調整縮進長度,比如tab長度為2個空格,在工具設置-編輯器中調整。(如下圖示例)
調整縮進示例
如果不喜歡使用tab而喜歡使用空格,也可以在設置中調。注意這個調節只是編輯器里敲tab按鍵時轉為了空格,格式化時仍是tab。
調節格式化設置,參考菜單工具-插件配置。hx支持幾種格式化插件,他們都有自己的配置定義文件,請按插件配置中的說明修改設置。(如下圖示例)
格式化插件
比如格式化插件Formator-Prettier,它的配置文件為:【工具】【插件配置】【formator-frettier】【formator.config.js】(如下圖示例)
在菜單編輯-縮進中,可文件的縮進從tab轉空格或從空格轉tab。
13. 語法校驗
hx的語法校驗都是插件,在工具插件安裝中選擇各種校驗插件,不同語言的校驗插件不一樣。安裝校驗插件后,保存文件時會自動執行語法校驗。(如下圖示例)
語法插件
校驗概要結果會顯示在狀態欄,比如有2個錯誤(如下圖),可以按F4切換到不同的錯誤處,畫有紅波浪線(如下圖),鼠標移到紅波浪線上會顯示具體的錯誤信息。(如下圖示例)
例子
你也可以不保存,直接點菜單工具-驗證本文檔校驗語法 來進行校驗。(如下圖示例)
驗證本文檔語法
15. svn/git項目導入
以git為例:(git項目:需要安裝git插件、以及TortoiseGit、並配置ssh秘鑰)(如下圖示例)
導入git項目
插件名稱 Mac操作系統 Windows操作系統
svn Mac SVN教程 Windows SVN教程
git Mac Git教程 Windows Git教程
15. 預編譯器(less/sass)
在【菜單】-->【插件安裝】里有各種語言的預編譯器,比如less、ts等。安裝預編譯器后,hx下的所有項目均可用共用。