前言
本人是一名JAVA后端開發，偶爾也會研究一下前端內容，因為Hbuilder是基于eclipse開發的，所以用起來倍感親切啊，而且在我嘗試使用的幾款前端開發工具中，Hbuilder的表現也是相當出色地，可以訪問Huilder官網下載體驗一下。
言歸正傳，當前前端的開發中，MVVM框架非常流行，比較典型的如：AngularJS、VueJS等，這部分框架基本都有一個指令的概念，在工具中配置相關的提示，可以極大地方便的我們的開發，下面就來介紹一下如何在Hbuilder中進行配置，話不多說了，來一起看看詳細的介紹吧。
依次點擊：工具 -> 擴展代碼塊 -> 自定義html代碼塊
打開后源文件代碼如下：
require 'ruble'=begin HBuilder可使用ruby腳本來擴展代碼塊和增強操作命令。這是極客的神奇玩具。 本文檔用于用戶自定義HTML擴展命令，并非HBuilder預置命令的文檔，預置的代碼塊不可改。查閱預置代碼塊，請在彈出預置代碼塊界面時點右下角的編輯按鈕，比如div代碼塊。 本文檔修改完畢，保存即可生效。 玩的愉快，別玩壞！ 腳本開源地址 https://github.com/dcloudio/HBuilderRubyBundle 可以把你的配置共享到這里，也可以在這里獲取其他網友的版本 注：如果1.9版本之前的用戶修改過HTML代碼塊，請點右鍵打開本文檔所在目錄，找之前的snippets.rb.bak文件，把修改過的內容放置進來。 =endwith_defaults :scope => 'text.html text' do |bundle| #=====HTML標簽代碼塊================================================================================#如下是一個示例代碼塊，可以復制后再添加新代碼塊 snippet 'div_class' do |cmd| #div_class是顯示名稱，代碼助手提示列表顯示時可見 cmd.trigger = 'divc' #divc是激活字符，即按下divc后會觸發該代碼塊 cmd.expansion = "<div class=/"$1/"> $0</div>" #expansion是代碼塊的輸出內容，其中$0、$1是光標的停留和切換位置。$1是第一個停留光標，$0是最后回車時停留的光標。 #如果輸出涉及到換行和tab，也需嚴格在這里使用換行和tab。 #輸出雙引號在前面加/來轉義，輸出$使用/$(單引號中)或//$(雙引號中)轉義 cmd.needApplyReContentAssist = true #這句話的意思是輸出后同時激活代碼助手，即在$1的位置直接拉出樣式列表 end #div_class代碼塊結束 snippet 'ng-pluralize' do |cmd| cmd.trigger = 'ngp' cmd.expansion = "<ng-pluralize>$1</ng-pluralize>" endendwith_defaults :scope => 'text.html entity.other.attribute-name.html' do |bundle| #=====HTML屬性代碼塊====================================================#如下是一個示例代碼塊，可以復制后再添加新代碼塊 snippet 'ng-' do |s| #ng-是顯示名稱，代碼助手提示列表顯示時可見 s.trigger = 'ng-' #ng-是激活字符，即按下ng-后會觸發該代碼塊 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是代碼塊的輸出內容，其中$0、$1是光標的停留和切換位置。 #$1是第一個停留光標，$0是最后回車時停留的光標。 #使用{}包圍的內容，是提示值域。 #如果輸出涉及到換行和tab，也需嚴格在這里使用換行和tab。 #輸出雙引號在前面加/來轉義，輸出$使用/$(單引號中)或//$(雙引號中)轉義 s.locationType='HTML_ATTRIBUTE' end #ng代碼塊結束endwith_defaults :scope => 'text.html - source', :input => :none, :output => :insert_as_snippet do |bundle| #=====無顯示名稱的快捷命令========================begin如下示例均為系統已經預置的命令，無需重復制作示例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為選中文字添加包圍標簽 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#可復制一段命令，在下面開始制作新命令end在這段配置中，已經配置了AngularJS的指令提示。
with_defaults :scope => 'text.html entity.other.attribute-name.html' do |bundle| #=====HTML屬性代碼塊====================================================#如下是一個示例代碼塊，可以復制后再添加新代碼塊 snippet 'ng-' do |s| #ng-是顯示名稱，代碼助手提示列表顯示時可見 s.trigger = 'ng-' #ng-是激活字符，即按下ng-后會觸發該代碼塊 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是代碼塊的輸出內容，其中$0、$1是光標的停留和切換位置。 #$1是第一個停留光標，$0是最后回車時停留的光標。 #使用{}包圍的內容，是提示值域。 #如果輸出涉及到換行和tab，也需嚴格在這里使用換行和tab。 #輸出雙引號在前面加/來轉義，輸出$使用/$(單引號中)或//$(雙引號中)轉義 s.locationType='HTML_ATTRIBUTE' end #ng代碼塊結束end指令本質上就是HTML標簽的屬性，所以我們需要做的就是在這段配置里面添加我們自己需要的指令提示。添加后，該段配置如下：
with_defaults :scope => 'text.html entity.other.attribute-name.html' do |bundle| #=====HTML屬性代碼塊====================================================#如下是一個示例代碼塊，可以復制后再添加新代碼塊 snippet 'ng-' do |s| #ng-是顯示名稱，代碼助手提示列表顯示時可見 s.trigger = 'ng-' #ng-是激活字符，即按下ng-后會觸發該代碼塊 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是代碼塊的輸出內容，其中$0、$1是光標的停留和切換位置。 #$1是第一個停留光標，$0是最后回車時停留的光標。 #使用{}包圍的內容，是提示值域。 #如果輸出涉及到換行和tab，也需嚴格在這里使用換行和tab。 #輸出雙引號在前面加/來轉義，輸出$使用/$(單引號中)或//$(雙引號中)轉義 s.locationType='HTML_ATTRIBUTE' end #ng代碼塊結束 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代碼塊結束 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 #:代碼塊結束 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代碼塊結束end配置修改完成后，直接保存，雖然文件上提示保存后即可生效，但是我在實際使用中發現并未生效，不要急，我們只需要重啟一下Hbuilder就可以了。重啟后，我們在來使用這些指令，只要輸入觸發的字符串就會出現提示了。
補發修改后的完整配置文件，如果沒有修改過，直接替換掉原文件。
require 'ruble'=begin HBuilder可使用ruby腳本來擴展代碼塊和增強操作命令。這是極客的神奇玩具。 本文檔用于用戶自定義HTML擴展命令，并非HBuilder預置命令的文檔，預置的代碼塊不可改。查閱預置代碼塊，請在彈出預置代碼塊界面時點右下角的編輯按鈕，比如div代碼塊。 本文檔修改完畢，保存即可生效。 玩的愉快，別玩壞！ 腳本開源地址 https://github.com/dcloudio/HBuilderRubyBundle 可以把你的配置共享到這里，也可以在這里獲取其他網友的版本 注：如果1.9版本之前的用戶修改過HTML代碼塊，請點右鍵打開本文檔所在目錄，找之前的snippets.rb.bak文件，把修改過的內容放置進來。=endwith_defaults :scope => 'text.html text' do |bundle| #==HTML標簽代碼==#如下是一個示例代碼塊，可以復制后再添加新代碼塊 snippet 'div_class' do |cmd| #div_class是顯示名稱，代碼助手提示列表顯示時可見 cmd.trigger = 'divc' #divc是激活字符，即按下divc后會觸發該代碼塊 cmd.expansion = "<div class=/"$1/">$0</div>" #expansion是代碼塊的輸出內容，其中$0、$1是光標的停留和切換位置。$1是第一個停留光標，$0是最后回車時停留的光標。 #如果輸出涉及到換行和tab，也需嚴格在這里使用換行和tab。 #輸出雙引號在前面加/來轉義，輸出$使用/$(單引號中)或//$(雙引號中)轉義 cmd.needApplyReContentAssist = true #這句話的意思是輸出后同時激活代碼助手，即在$1的位置直接拉出樣式列表 end #div_class代碼塊結束 snippet 'ng-pluralize' do |cmd| cmd.trigger = 'ngp' cmd.expansion = "<ng-pluralize>$1</ng-pluralize>" endendwith_defaults :scope => 'text.html entity.other.attribute-name.html' do |bundle| #==HTML屬性代碼==#如下是一個示例代碼塊，可以復制后再添加新代碼塊 snippet 'ng-' do |s| #ng-是顯示名稱，代碼助手提示列表顯示時可見 s.trigger = 'ng-' #ng-是激活字符，即按下ng-后會觸發該代碼塊 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是代碼塊的輸出內容，其中$0、$1是光標的停留和切換位置。 #$1是第一個停留光標，$0是最后回車時停留的光標。 #使用{}包圍的內容，是提示值域。 #如果輸出涉及到換行和tab，也需嚴格在這里使用換行和tab。 #輸出雙引號在前面加/來轉義，輸出$使用/$(單引號中)或//$(雙引號中)轉義 s.locationType='HTML_ATTRIBUTE' end #ng代碼塊結束 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代碼塊結束 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 #:代碼塊結束 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代碼塊結束endwith_defaults :scope => 'text.html - source', :input => :none, :output => :insert_as_snippet do |bundle| #==無顯示名稱的快捷命令===begin如下示例均為系統已經預置的命令，無需重復制作示例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為選中文字添加包圍標簽 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#可復制一段命令，在下面開始制作新命令end總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
圖片精選
