Hbuilder配置AvalonとVue指令提示の方法詳細

12460 ワード
hbuilder avalon vueコマンドのヒント
前言
私はJAVAバックエンドの開発です。たまに先端の内容を研究します。Hbuilderはeclipseに基づいて開発したので、とても親切です。また、試しに使ってみたいくつかの先端開発ツールの中で、Hbuilderの表現も素晴らしいです。Huilder公式サイトダウンロードして体験してみてください。
さて、フロントエンドの開発では、MVMフレームが非常に流行っています。典型的な例として、AnglarJS、VueJSなどのように、このフレームワークは基本的にコマンドの概念があります。ツールの中に関連のヒントを配置して、非常に便利な私たちの開発を紹介します。詳しく紹介してみましょう。
順次クリックします。ツール->拡張コードブロック->カスタム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
この構成では、AnglarJSのコマンドメッセージが配置されています。

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  ，           。
=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
締め括りをつける
以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考となる学習価値を持っています。質問があれば、メッセージを書いて交流してください。ありがとうございます。
Spring Boot直接jarでプロジェクトを実行する方法
Hbuilderはリモート接続サーバーからコードをアップロードする図文教程です。