【前端vue開發】Hbuilder配置Avalon、AngularJS、Vue指令提示

時間 2019-11-19

標籤前端vue開發 hbuilder 配置 avalon angularjs vue 指令提示欄目 AngularJS 简体版

原文原文鏈接

偶爾也會研究一下前端內容，由於Hbuilder是基於eclipse開發的，因此用起來倍感親切啊，並且在我嘗試使用的幾款前端開發工具中，Hbuilder的表現也是至關出色地，能夠訪問Huilder官網下載體驗一下。
言歸正傳，當前前端的開發中，MVVM框架很是流行，比較典型的如：AngularJS、VueJS等，這部分框架基本都有一個指令的概念，在工具中配置相關的提示，能夠極大地方便的咱們的開發，下面就來介紹一下如何在Hbuilder中進行配置。css

依次點擊：工具 -> 擴展代碼塊 -> 自定義html代碼塊html

打開後源文件代碼以下：前端

require 'ruble'
=begin 
 HBuilder可以使用ruby腳原本擴展代碼塊和加強操做命令。這是極客的神奇玩具。
  本文檔用於用戶自定義HTML擴展命令，並不是HBuilder預置命令的文檔，預置的代碼塊不可改。查閱預置代碼塊，請在彈出預置代碼塊界面時點右下角的編輯按鈕，好比div代碼塊。
  本文檔修改完畢，保存便可生效。
  玩的愉快，別玩壞！

  腳本開源地址 https://github.com/dcloudio/HBuilderRubyBundle
  能夠把你的配置共享到這裏，也能夠在這裏獲取其餘網友的版本

  注：若是1.9版本以前的用戶修改過HTML代碼塊，請點右鍵打開本文檔所在目錄，找以前的snippets.rb.bak文件，把修改過的內容放置進來。 
=end

with_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>"
  end

end


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


with_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的指令提示。vue

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標籤的屬性，因此咱們須要作的就是在這段配置裏面添加咱們本身須要的指令提示。添加後，該段配置以下：git

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就能夠了。重啓後，咱們在來使用這些指令，只要輸入觸發的字符串就會出現提示了。
github

修改以後的文件內容以下，若是你修改的不成功，直接用下面內容替換整個頁面內容：ruby

require 'ruble'
=begin
 HBuilder可以使用ruby腳原本擴展代碼塊和加強操做命令。這是極客的神奇玩具。
  本文檔用於用戶自定義HTML擴展命令，並不是HBuilder預置命令的文檔，預置的代碼塊不可改。查閱預置代碼塊，請在彈出預置代碼塊界面時點右下角的編輯按鈕，好比div代碼塊。
  本文檔修改完畢，保存便可生效。
  玩的愉快，別玩壞！

  腳本開源地址 https://github.com/dcloudio/HBuilderRubyBundle
  能夠把你的配置共享到這裏，也能夠在這裏獲取其餘網友的版本

  注：若是1.9版本以前的用戶修改過HTML代碼塊，請點右鍵打開本文檔所在目錄，找以前的snippets.rb.bak文件，把修改過的內容放置進來。
=end

with_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>"
  end

end


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


with_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