Hbuilder配置Avalon和Vue指令提示的方法詳解
更新時間：2017年10月16日 09:55:34 作者：蔣固金
HBuilder是DCloud(數(shù)字天堂)推出的一款支持HTML5的Web開發(fā)IDE，下面這篇文章主要給大家介紹了關(guān)于Hbuilder如何配置Avalon和Vue指令提示的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。
前言
本人是一名JAVA后端開發(fā)，偶爾也會研究一下前端內(nèi)容，因?yàn)镠builder是基于eclipse開發(fā)的，所以用起來倍感親切啊，而且在我嘗試使用的幾款前端開發(fā)工具中，Hbuilder的表現(xiàn)也是相當(dāng)出色地，可以訪問Huilder官網(wǎng)下載體驗(yàn)一下。
言歸正傳，當(dāng)前前端的開發(fā)中，MVVM框架非常流行，比較典型的如：AngularJS、VueJS等，這部分框架基本都有一個指令的概念，在工具中配置相關(guān)的提示，可以極大地方便的我們的開發(fā)，下面就來介紹一下如何在Hbuilder中進(jìn)行配置，話不多說了，來一起看看詳細(xì)的介紹吧。
依次點(diǎn)擊：工具 -> 擴(kuò)展代碼塊 -> 自定義html代碼塊
打開后源文件代碼如下：
require 'ruble'
=begin
HBuilder可使用ruby腳本來擴(kuò)展代碼塊和增強(qiáng)操作命令。這是極客的神奇玩具。
本文檔用于用戶自定義HTML擴(kuò)展命令，并非HBuilder預(yù)置命令的文檔，預(yù)置的代碼塊不可改。查閱預(yù)置代碼塊，請在彈出預(yù)置代碼塊界面時點(diǎn)右下角的編輯按鈕，比如div代碼塊。
本文檔修改完畢，保存即可生效。
玩的愉快，別玩壞！
腳本開源地址 https://github.com/dcloudio/HBuilderRubyBundle
可以把你的配置共享到這里，也可以在這里獲取其他網(wǎng)友的版本
注：如果1.9版本之前的用戶修改過HTML代碼塊，請點(diǎn)右鍵打開本文檔所在目錄，找之前的snippets.rb.bak文件，把修改過的內(nèi)容放置進(jìn)來。
=end
with_defaults :scope => 'text.html text' do |bundle| #=====HTML標(biāo)簽代碼塊================================================================================
#如下是一個示例代碼塊，可以復(fù)制后再添加新代碼塊
snippet 'div_class' do |cmd| #div_class是顯示名稱，代碼助手提示列表顯示時可見
cmd.trigger = 'divc' #divc是激活字符，即按下divc后會觸發(fā)該代碼塊
cmd.expansion = "<div class=\"$1\">
$0
</div>" #expansion是代碼塊的輸出內(nèi)容，其中$0、$1是光標(biāo)的停留和切換位置。$1是第一個停留光標(biāo)，$0是最后回車時停留的光標(biāo)。
#如果輸出涉及到換行和tab，也需嚴(yán)格在這里使用換行和tab。
#輸出雙引號在前面加\來轉(zhuǎn)義，輸出$使用\$(單引號中)或\\$(雙引號中)轉(zhuǎn)義
cmd.needApplyReContentAssist = true #這句話的意思是輸出后同時激活代碼助手，即在$1的位置直接拉出樣式列表
end #div_class代碼塊結(jié)束
snippet 'ng-pluralize' do |cmd|
cmd.trigger = 'ngp'
cmd.expansion = "<ng-pluralize>$1</ng-pluralize>"
end
end
with_defaults :scope => 'text.html entity.other.attribute-name.html' do |bundle| #=====HTML屬性代碼塊====================================================
#如下是一個示例代碼塊，可以復(fù)制后再添加新代碼塊
snippet 'ng-' do |s| #ng-是顯示名稱，代碼助手提示列表顯示時可見
s.trigger = 'ng-' #ng-是激活字符，即按下ng-后會觸發(fā)該代碼塊
s.expansion='ng-${1:app/bind/bind-html/bind-template/blur/change/checked/class/class-even/class-odd/click/cloak/controller/copy/csp/cut/dblclick/disabled/focus/hide/href/if/include/init/keydown/keypress/keyup/list/model/mousedown/mouseenter/mouseleave/mousemove/mouseover/mouseup/ng-non-bindable/open/options/paste/readonly/repeat-start/repeat-end/selected/show/src/srcset/style/submit/swipe-left/swipe-right/switch/switch-default/switch-when/view}="$2"'
#expansion是代碼塊的輸出內(nèi)容，其中$0、$1是光標(biāo)的停留和切換位置。
#$1是第一個停留光標(biāo)，$0是最后回車時停留的光標(biāo)。
#使用{}包圍的內(nèi)容，是提示值域。
#如果輸出涉及到換行和tab，也需嚴(yán)格在這里使用換行和tab。
#輸出雙引號在前面加\來轉(zhuǎn)義，輸出$使用\$(單引號中)或\\$(雙引號中)轉(zhuǎn)義
s.locationType='HTML_ATTRIBUTE'
end #ng代碼塊結(jié)束
end
with_defaults :scope => 'text.html - source', :input => :none, :output => :insert_as_snippet do |bundle| #=====無顯示名稱的快捷命令=======================
=begin
如下示例均為系統(tǒng)已經(jīng)預(yù)置的命令，無需重復(fù)制作
示例1 Ctrl+Enter輸出<br />
command t(:quick_br) do |cmd|
cmd.key_binding = 'M2+ENTER'
cmd.output = :insert_as_snippet
cmd.input = :none
cmd.invoke { "<br />" }
end
示例2 Ctrl+9為選中文字添加包圍標(biāo)簽
command t(:wrap_selection_in_tag_pair) do |cmd|
cmd.key_binding = "CONTROL+9"
cmd.input = :selection
cmd.invoke do |context|
selection = ENV['TM_SELECTED_TEXT'] || ''
if selection.length > 0
"<${1:p}>#{selection.gsub('/', '\/')}</${1:p}>"
else
"<${1:p}>$0</${1:p}>"
end
end
end
=end
#可復(fù)制一段命令，在下面開始制作新命令
end
在這段配置中，已經(jīng)配置了AngularJS的指令提示。
with_defaults :scope => 'text.html entity.other.attribute-name.html' do |bundle| #=====HTML屬性代碼塊====================================================
#如下是一個示例代碼塊，可以復(fù)制后再添加新代碼塊
snippet 'ng-' do |s| #ng-是顯示名稱，代碼助手提示列表顯示時可見
s.trigger = 'ng-' #ng-是激活字符，即按下ng-后會觸發(fā)該代碼塊
s.expansion='ng-${1:app/bind/bind-html/bind-template/blur/change/checked/class/class-even/class-odd/click/cloak/controller/copy/csp/cut/dblclick/disabled/focus/hide/href/if/include/init/keydown/keypress/keyup/list/model/mousedown/mouseenter/mouseleave/mousemove/mouseover/mouseup/ng-non-bindable/open/options/paste/readonly/repeat-start/repeat-end/selected/show/src/srcset/style/submit/swipe-left/swipe-right/switch/switch-default/switch-when/view}="$2"'
#expansion是代碼塊的輸出內(nèi)容，其中$0、$1是光標(biāo)的停留和切換位置。
#$1是第一個停留光標(biāo)，$0是最后回車時停留的光標(biāo)。
#使用{}包圍的內(nèi)容，是提示值域。
#如果輸出涉及到換行和tab，也需嚴(yán)格在這里使用換行和tab。
#輸出雙引號在前面加\來轉(zhuǎn)義，輸出$使用\$(單引號中)或\\$(雙引號中)轉(zhuǎn)義
s.locationType='HTML_ATTRIBUTE'
end #ng代碼塊結(jié)束
end
指令本質(zhì)上就是HTML標(biāo)簽的屬性，所以我們需要做的就是在這段配置里面添加我們自己需要的指令提示。添加后，該段配置如下：
with_defaults :scope => 'text.html entity.other.attribute-name.html' do |bundle| #=====HTML屬性代碼塊====================================================
#如下是一個示例代碼塊，可以復(fù)制后再添加新代碼塊
snippet 'ng-' do |s| #ng-是顯示名稱，代碼助手提示列表顯示時可見
s.trigger = 'ng-' #ng-是激活字符，即按下ng-后會觸發(fā)該代碼塊
s.expansion='ng-${1:app/bind/bind-html/bind-template/blur/change/checked/class/class-even/class-odd/click/cloak/controller/copy/csp/cut/dblclick/disabled/focus/hide/href/if/include/init/keydown/keypress/keyup/list/model/mousedown/mouseenter/mouseleave/mousemove/mouseover/mouseup/ng-non-bindable/open/options/paste/readonly/repeat-start/repeat-end/selected/show/src/srcset/style/submit/swipe-left/swipe-right/switch/switch-default/switch-when/view}="$2"'
#expansion是代碼塊的輸出內(nèi)容，其中$0、$1是光標(biāo)的停留和切換位置。
#$1是第一個停留光標(biāo)，$0是最后回車時停留的光標(biāo)。
#使用{}包圍的內(nèi)容，是提示值域。
#如果輸出涉及到換行和tab，也需嚴(yán)格在這里使用換行和tab。
#輸出雙引號在前面加\來轉(zhuǎn)義，輸出$使用\$(單引號中)或\\$(雙引號中)轉(zhuǎn)義
s.locationType='HTML_ATTRIBUTE'
end #ng代碼塊結(jié)束
snippet 'ms-' do |s| #ms-avalon代碼提示
s.trigger = 'ms-'
s.expansion='ms-${1:skip/controller/important/attr/css/text/html/class/active/hover/if/visible/for/on/on-animationend/on-blur/on-change/on-input/on-click/on-dblclick/on-focus/on-keydown/on-keypress/on-keyup/on-mousedown/on-mouseenter/on-mouseleave/on-mousemove/on-mouseout/on-mouseover/on-mouseup/on-scroll/on-submit/duplex/rules/validate/effect/widget}="$2"'
s.locationType='HTML_ATTRIBUTE'
end #ms代碼塊結(jié)束
snippet ':' do |s| #:-avalon2.1.15后使用:xxxx短指令代碼提示
s.trigger = ':'
s.expansion=':${1:skip/controller/important/attr/css/text/html/class/active/hover/if/visible/for/on/on-animationend/on-blur/on-change/on-input/on-click/on-dblclick/on-focus/on-keydown/on-keypress/on-keyup/on-mousedown/on-mouseenter/on-mouseleave/on-mousemove/on-mouseout/on-mouseover/on-mouseup/on-scroll/on-submit/duplex/rules/validate/effect/widget}="$2"'
s.locationType='HTML_ATTRIBUTE'
end #:代碼塊結(jié)束
snippet 'v-' do |s| #v-vue代碼提示
s.trigger = 'v-'
s.expansion='v-${1:text/html/show/if/else/else-if/for/on/bind/model/pre/cloak/once}="$2"'
s.locationType='HTML_ATTRIBUTE'
end #v代碼塊結(jié)束
end
配置修改完成后，直接保存，雖然文件上提示保存后即可生效，但是我在實(shí)際使用中發(fā)現(xiàn)并未生效，不要急，我們只需要重啟一下Hbuilder就可以了。重啟后，我們在來使用這些指令，只要輸入觸發(fā)的字符串就會出現(xiàn)提示了。
補(bǔ)發(fā)修改后的完整配置文件，如果沒有修改過，直接替換掉原文件。
require 'ruble'
=begin
HBuilder可使用ruby腳本來擴(kuò)展代碼塊和增強(qiáng)操作命令。這是極客的神奇玩具。
本文檔用于用戶自定義HTML擴(kuò)展命令，并非HBuilder預(yù)置命令的文檔，預(yù)置的代碼塊不可改。查閱預(yù)置代碼塊，請在彈出預(yù)置代碼塊界面時點(diǎn)右下角的編輯按鈕，比如div代碼塊。
本文檔修改完畢，保存即可生效。
玩的愉快，別玩壞！
腳本開源地址 https://github.com/dcloudio/HBuilderRubyBundle
可以把你的配置共享到這里，也可以在這里獲取其他網(wǎng)友的版本
注：如果1.9版本之前的用戶修改過HTML代碼塊，請點(diǎn)右鍵打開本文檔所在目錄，找之前的snippets.rb.bak文件，把修改過的內(nèi)容放置進(jìn)來。
=end
with_defaults :scope => 'text.html text' do |bundle| #==HTML標(biāo)簽代碼==
#如下是一個示例代碼塊，可以復(fù)制后再添加新代碼塊
snippet 'div_class' do |cmd| #div_class是顯示名稱，代碼助手提示列表顯示時可見
cmd.trigger = 'divc' #divc是激活字符，即按下divc后會觸發(fā)該代碼塊
cmd.expansion = "<div class=\"$1\">$0</div>"
#expansion是代碼塊的輸出內(nèi)容，其中$0、$1是光標(biāo)的停留和切換位置。$1是第一個停留光標(biāo)，$0是最后回車時停留的光標(biāo)。
#如果輸出涉及到換行和tab，也需嚴(yán)格在這里使用換行和tab。
#輸出雙引號在前面加\來轉(zhuǎn)義，輸出$使用\$(單引號中)或\\$(雙引號中)轉(zhuǎn)義
cmd.needApplyReContentAssist = true #這句話的意思是輸出后同時激活代碼助手，即在$1的位置直接拉出樣式列表
end #div_class代碼塊結(jié)束
snippet 'ng-pluralize' do |cmd|
cmd.trigger = 'ngp'
cmd.expansion = "<ng-pluralize>$1</ng-pluralize>"
end
end
with_defaults :scope => 'text.html entity.other.attribute-name.html' do |bundle| #==HTML屬性代碼==
#如下是一個示例代碼塊，可以復(fù)制后再添加新代碼塊
snippet 'ng-' do |s| #ng-是顯示名稱，代碼助手提示列表顯示時可見
s.trigger = 'ng-' #ng-是激活字符，即按下ng-后會觸發(fā)該代碼塊
s.expansion='ng-${1:app/bind/bind-html/bind-template/blur/change/checked/class/class-even/class-odd/click/cloak/controller/copy/csp/cut/dblclick/disabled/focus/hide/href/if/include/init/keydown/keypress/keyup/list/model/mousedown/mouseenter/mouseleave/mousemove/mouseover/mouseup/ng-non-bindable/open/options/paste/readonly/repeat-start/repeat-end/selected/show/src/srcset/style/submit/swipe-left/swipe-right/switch/switch-default/switch-when/view}="$2"'
#expansion是代碼塊的輸出內(nèi)容，其中$0、$1是光標(biāo)的停留和切換位置。
#$1是第一個停留光標(biāo)，$0是最后回車時停留的光標(biāo)。
#使用{}包圍的內(nèi)容，是提示值域。
#如果輸出涉及到換行和tab，也需嚴(yán)格在這里使用換行和tab。
#輸出雙引號在前面加\來轉(zhuǎn)義，輸出$使用\$(單引號中)或\\$(雙引號中)轉(zhuǎn)義
s.locationType='HTML_ATTRIBUTE'
end #ng代碼塊結(jié)束
snippet 'ms-' do |s| #ms-avalon代碼提示
s.trigger = 'ms-'
s.expansion='ms-${1:skip/controller/important/attr/css/text/html/class/active/hover/if/visible/for/on/on-animationend/on-blur/on-change/on-input/on-click/on-dblclick/on-focus/on-keydown/on-keypress/on-keyup/on-mousedown/on-mouseenter/on-mouseleave/on-mousemove/on-mouseout/on-mouseover/on-mouseup/on-scroll/on-submit/duplex/rules/validate/effect/widget}="$2"'
s.locationType='HTML_ATTRIBUTE'
end #ms代碼塊結(jié)束
snippet ':' do |s| #:-avalon2.1.15后使用:xxxx短指令代碼提示
s.trigger = ':'
s.expansion=':${1:skip/controller/important/attr/css/text/html/class/active/hover/if/visible/for/on/on-animationend/on-blur/on-change/on-input/on-click/on-dblclick/on-focus/on-keydown/on-keypress/on-keyup/on-mousedown/on-mouseenter/on-mouseleave/on-mousemove/on-mouseout/on-mouseover/on-mouseup/on-scroll/on-submit/duplex/rules/validate/effect/widget}="$2"'
s.locationType='HTML_ATTRIBUTE'
end #:代碼塊結(jié)束
snippet 'v-' do |s| #v-vue代碼提示
s.trigger = 'v-'
s.expansion='v-${1:text/html/show/if/else/else-if/for/on/bind/model/pre/cloak/once}="$2"'
s.locationType='HTML_ATTRIBUTE'
end #v代碼塊結(jié)束
end
with_defaults :scope => 'text.html - source', :input => :none, :output => :insert_as_snippet do |bundle| #==無顯示名稱的快捷命令==
=begin
如下示例均為系統(tǒng)已經(jīng)預(yù)置的命令，無需重復(fù)制作
示例1 Ctrl+Enter輸出<br />
command t(:quick_br) do |cmd|
cmd.key_binding = 'M2+ENTER'
cmd.output = :insert_as_snippet
cmd.input = :none
cmd.invoke { "<br />" }
end
示例2 Ctrl+9為選中文字添加包圍標(biāo)簽
command t(:wrap_selection_in_tag_pair) do |cmd|
cmd.key_binding = "CONTROL+9"
cmd.input = :selection
cmd.invoke do |context|
selection = ENV['TM_SELECTED_TEXT'] || ''
if selection.length > 0
"<${1:p}>#{selection.gsub('/', '\/')}</${1:p}>"
else
"<${1:p}>$0</${1:p}>"
end
end
end
=end
#可復(fù)制一段命令，在下面開始制作新命令
end
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
權(quán)限控制之粗粒度與細(xì)粒度概念及實(shí)現(xiàn)簡單介紹
這篇文章主要介紹了權(quán)限控制之粗粒度與細(xì)粒度概念及實(shí)現(xiàn)簡單介紹，具有一定參考價值，需要的朋友可以了解下。2017-10-10
聊聊自學(xué),那些讓你事半功倍的自學(xué)資源(干貨分享)
B站是一個學(xué)習(xí)網(wǎng)站。一入B站深似海，從此游戲是路人。B站雖然視頻資源多，但是內(nèi)容也是五花八門、參差不齊，本文給大家收集了關(guān)于學(xué)習(xí)計算機(jī)編程的視頻，這里有我曾經(jīng)的入門視頻，也有跟朋友交流獲得的，特此篩選了下面這些視頻，分享給大家2021-04-04
這篇文章主要介紹了PE文件結(jié)構(gòu)詳解,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了軟件測試過程中常見的英文單詞匯總,需要的朋友可以參考下2022-09-09
微信小程序常用功能實(shí)例匯總包括上拉刷新,下拉加載,列表數(shù)據(jù)綁定,輪播,參數(shù)傳遞
這篇文章主要介紹了微信小程序常用功能實(shí)例匯總包括上拉刷新,下拉加載,列表數(shù)據(jù)綁定,輪播,參數(shù)傳遞,撥打電話,需要的朋友可以參考下2022-12-12
在軟件行業(yè)中，神仙打架的名場面，那就不得不提的是2014年的那場——測試驅(qū)動開發(fā)（TDD）之爭。2021-05-05
Unity3D中shader 輪廓描邊效果實(shí)現(xiàn)代碼
這篇文章主要介紹了Unity3D中shader 輪廓描邊效果的相關(guān)資料,需要的朋友可以參考下2017-03-03
詳解基于深度學(xué)習(xí)的兩種信源信道聯(lián)合編碼
信源編碼是一個數(shù)據(jù)壓縮的過程，其目的是盡可能地將信源中的冗余度去掉；而信道編碼則是一個增加冗余的過程，通過適當(dāng)加入冗余度來達(dá)到抵抗信道噪聲，保護(hù)傳輸數(shù)據(jù)的目的。2021-05-05
這篇文章介紹了Kotlin與Java的區(qū)別，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-12-12
對初學(xué)者而言，匯編的許多命令太復(fù)雜，往往學(xué)習(xí)很長時間也寫不出一個漂漂亮亮的程序，以致妨礙了我們學(xué)習(xí)匯編的興趣，不少人就此放棄2013-05-05