Hbuilder配置Avalon和Vue指令提示的方法详解

 更新时间:2017年10月16日 09:55:34   作者:蒋固金   我要评论
HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE,下面这篇文章主要给大家介绍了关于Hbuilder如何配置Avalon和Vue指令提示的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。

前言

本人是一名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文件,把修改过的内容放置进来。 
=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的指令提示。

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • App开发建议技巧

    App开发建议技巧

    有同学问我,对应用开发你有没有值得注意或小技巧的地方可以分享的。比如适配、优化、排查错误什么的。鸡排把自己的总结笔记整理出来了。供大家参考
    2018-01-01
  • bilibili弹幕转ass程序制作思路及过程

    bilibili弹幕转ass程序制作思路及过程

    本文主要是为了方便线下播放Bilibili的弹幕,而专门制作的一款将弹幕转换为ASS的程序,介绍了程序制作的思路及过程,有需要的朋友可以参考下
    2014-09-09
  • 汇编语言超浓缩教程

    汇编语言超浓缩教程

    对初学者而言,汇编的许多命令太复杂,往往学习很长时间也写不出一个漂漂亮亮的程序,以致妨碍了我们学习汇编的兴趣,不少人就此放弃
    2013-05-05
  • Eclipse 误删文件的恢复与代码的恢复详解

    Eclipse 误删文件的恢复与代码的恢复详解

    这篇文章主要介绍了Eclipse 误删文件的恢复,代码的恢复的相关资料,需要的朋友可以参考下
    2016-09-09
  • nasm实现的用vmware运行自做的linux启动盘的引导代码

    nasm实现的用vmware运行自做的linux启动盘的引导代码

    这个小的代码的编写和运行还是能让自己对系统启动有一个更深的认识,不过有个不懂的就是怎么用ISO镜像文件启动,怎么将引导代码写入ISO镜像文件,依然没有找到很好的方法解决
    2013-04-04
  • 汇编优化提示

    汇编优化提示

    暑假瞄了一些汇编优化的文章,感觉这篇有点意思。尽管英文水平不咋地,还是倔起牛劲翻译了下。肯定有不好的地方,大家海涵~英文原文附件给出~如果有什么错误还望批评指正~另外,如果admin感觉可以加精的话就麻烦下了
    2012-07-07
  • 分享Git常用7大技巧和命令

    分享Git常用7大技巧和命令

    Git 是一个非常强大的工具,它包含丰富的工具用以维护项目,我们在日期工作中会经常用到一些常用命令,本文先为大家介绍下面七个Git常用技巧和命令
    2018-09-09
  • 内存溢出和内存泄漏的详解及区别

    内存溢出和内存泄漏的详解及区别

    这篇文章主要介绍了内存溢出和内存泄漏的详解及区别的相关资料,需要的朋友可以参考下
    2017-03-03
  • Idea 无法引用类问题解决办法

    Idea 无法引用类问题解决办法

    这篇文章主要介绍了 Idea 无法引用类问题解决办法的相关资料,需要的朋友可以参考下
    2017-03-03
  • 计算机二级如何一次性通过?给NCRE焦躁心情降温!

    计算机二级如何一次性通过?给NCRE焦躁心情降温!

    计算机二级到现阶段应该如何备考,该听什么课?该针对哪些考点重点学习,这些都要做到心里有数,有计划性。这篇文章为大家分享了计算机二级备考技巧,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08

最新评论