HBuilderX中使用vue，如果是打開vue文件，會(huì)自動(dòng)掛載vue語法庫。
如果是HTML文件里引用vue框架，需要點(diǎn)右下角的語法提示庫，選擇vue語法庫。
我們更推薦開發(fā)者使用vue單文件規(guī)范，直接打開vue文件。
注意：如果文件不在項(xiàng)目下，而是單獨(dú)的文件，無法掛載語法庫，請?jiān)谧髠?cè)項(xiàng)目管理器建個(gè)項(xiàng)目，打開項(xiàng)目里的文件進(jìn)行體驗(yàn)。

1.語法高亮

除了vue的普通語法高亮支持，HBuilderX還支持各種表達(dá)式語法，以及script和style支持的其他語言如less、scss、stylus、typescript等高亮，無需安裝插件。

2.代碼提示

2.1 API提示及幫助

提示不止是要全，而且要準(zhǔn)。不能把所有詞都猜一遍列出來，該有什么就有什么，清晰可信賴。
既要寫的快，又要寫不錯(cuò)。
除了完善的提示，在代碼助手右側(cè)還能看到清晰的幫助描述，對api進(jìn)行說明，還有vue官網(wǎng)的api鏈接，點(diǎn)擊即可直達(dá)vue官網(wǎng)指定頁面。非常適合學(xué)習(xí)參考。

2.2 this的精準(zhǔn)識(shí)別

2.3 語法提示

2.4 指令提示

2.5 自定義組件提示

HBuilderX的組件語法提示比其他工具都要強(qiáng)大，組件的標(biāo)簽、屬性都可以直接被提示出來。

2.6 doc

HBuilderX支持強(qiáng)大的vue doc，是vue組件開發(fā)者的利器，通過類jsdoc的寫法，可讓你的組件實(shí)現(xiàn)全面的代碼提示和幫助。詳見https://ask./article/35814

2.7 兼容vscode vetur插件中的vue規(guī)范

一些vue的組件庫，已經(jīng)按照vetur規(guī)范制作語法提示庫，比如Element UI、Onsen UI、Bootstrap Vue等框架。
這些框架npm安裝或在HBuilderX新建模板中選擇安裝，可以直接實(shí)現(xiàn)代碼提示。如下圖

2.8 常用代碼塊/自定義代碼塊

敲v，在拉出的代碼助手列表里可以看到大量vue代碼塊。
你也可以在工具-代碼塊設(shè)置-vue代碼塊里自己添加更多代碼塊。

2.9 vue router

支持提示$router、$route 所有實(shí)例方法、屬性

2.10 vuex

支持提示State、Mutation、action等，并支持轉(zhuǎn)到定義

2.11 其他

另外其他開發(fā)工具常見的emmet、d.ts，HBuilderX也均良好支持。

3.幫助文檔

光標(biāo)放到api處，按下F1，可直接在右側(cè)打開對應(yīng)的幫助文檔，不用切屏，邊看文檔邊改代碼，見下圖：

4.轉(zhuǎn)到定義

按下alt+鼠標(biāo)單擊，即可對各種變量、樣式、方法的引用溯源，在template、script、style中來回跳轉(zhuǎn)。非常強(qiáng)大而靈活。
按下ctrl+alt+單擊，還可在旁邊以分欄方式打開定義處，方便并排查看。

5.重構(gòu)或選擇相同語法詞

如果你想看某個(gè)變量在哪里被引用，或者選中所有變量進(jìn)行改名，那么點(diǎn)右鍵->選擇相同變量（ctrl+shift+e）。
如下圖可見，“l(fā)ist”在文中出現(xiàn)很多相同單詞，但只有那幾個(gè)準(zhǔn)確的變量被選中：

6.語法校驗(yàn)

首先需要在插件管理中安裝eslint-plugin-vue，然后點(diǎn)工具-驗(yàn)證本文檔語法，或在vue文檔保存時(shí)也會(huì)自動(dòng)驗(yàn)證。
插件的管理設(shè)置如配置快捷鍵、是否在保存時(shí)自動(dòng)觸發(fā)，在工具-外部命令-eslint-plugin-vue里的插件配置里，詳見http://ask./article/19599
如果要修改eslint的校驗(yàn)規(guī)則，在工具-外部命令-eslint-plugin-vue里的.eslintrc.js。

7. 大綱

選擇視圖菜單-顯示文檔結(jié)構(gòu)圖，或右鍵菜單里選擇，即可在左側(cè)出現(xiàn)大綱。點(diǎn)擊左側(cè)即可快讀跳轉(zhuǎn)右側(cè)。

8. 免命令行使用vue

如果你不喜歡配置復(fù)雜的node環(huán)境，這并不影響你快速進(jìn)入vue世界。
HBuilderX內(nèi)置了終端插件和node環(huán)境。
在新建界面，可以可視化新建vue項(xiàng)目，而不需要配cli。

在運(yùn)行菜單里，可以可視化的運(yùn)行和build。

在引入插件時(shí)也無需安裝node模塊，uni-app插件市場可以可視化的導(dǎo)入插件（僅適用于uni-app），詳見uni-app插件市場