Hbuilder配置Avalon、Vue指令提示

原创 2017年05月08日 15:21:22

我本人是一名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
版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/jianggujin/article/details/71419828

Vue+WebPack+HBuilder 项目记录

公司项目APP 下载减压可查看源代码,需要测试账号请留言。 Vue+WebPack+HBuilder 项目记录 以前使用过vue+gulp+hbuilder做过app,vue是直接使用scri...
  • huaxiongbiao
  • huaxiongbiao
  • 2017-04-12 12:02:04
  • 9734

Vue.js2.0环境配置到你第一个叼大的App!

最近Vuejs太火了,弄的老夫也想学一下,参考了很多大神的文章我决定总结一下,虽然我不会前端- -~,还是那句话,知识用的时候在学就够用!    老鸟自行退散!老夫要开始装x了 需要软件: HBuil...
  • xh21bao
  • xh21bao
  • 2017-04-24 19:29:09
  • 9922

利用HBuilder将vue项目打包成移动端app

事先准备,开发完成的web app项目(也可以利用vue-cli脚手架构建vue模板项目),npm run dev可以正常预览的项目 1,将项目目录下config文件内index.js中asset...
  • zhoudan232
  • zhoudan232
  • 2017-06-19 13:58:01
  • 23965

vue打Hbuilder打包app,设置沉浸式状态栏

在mainfest.json的plus中以下位置添加statusbar内容&quot;plus&quot;: { &quot;statusbar&quot;:{ &quot;im...
  • qq_23260639
  • qq_23260639
  • 2018-03-15 10:20:14
  • 131

关于使用hbuilder 打包vue的问题

这几天心血来潮,把之前做的vue应用用Hbuilder做成app,之中出现几个问题,现记录下来,以供大家参考: 1. 打包后,真机调试出现白屏: 1) 先在本地查看是否webpack后有语法错误,...
  • yq_oxygen
  • yq_oxygen
  • 2017-09-22 09:13:43
  • 2384

第一次写Hbuilder的三方插件

第一次写Hbuilder的三方插件  团队用Hbuilder写了一个App,Hbuilder的开发效率很好,性能比一般的H5开发框架效率要好很多,而且开发相对比较自由。但是三方插件缺非常的少,除了官方...
  • aofengdaxia
  • aofengdaxia
  • 2016-05-22 12:09:03
  • 7795

前端开发入门-Hbuilder编辑器使用方法

HBuilder不仅仅提示全面的语法,非语法的各种候选输入也都能提示。包括图片、链接、颜色、字体、脚本、样式、URI、ID、class、自定义JS对象、方法。小编在本文详细介绍了Hbuilder编辑器...
  • li_shuang_ls
  • li_shuang_ls
  • 2016-07-21 14:46:11
  • 11312

windows 下 VUE Hbuilder 开发环境搭建

hbuilder vue 开发环境搭建 由于公司app采用原生开发,人员架构比较小,人员利用率不高,所以有了切换到h5框架上,这样小范围实现团队开发全栈。方便人员利用,工作效率等。最终采用 hbu...
  • huliwho
  • huliwho
  • 2017-12-11 14:05:28
  • 269

Hbuilder 插件安装指南

http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/162
  • qq_31971935
  • qq_31971935
  • 2017-09-11 15:43:15
  • 213

HBuilder打包app(vue项目)

一、测试项目是否可以正确运行    指令:npm run dev首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目不必非得是像我这样的,这一步的目的只是测试一下咱们的vu...
  • niesiyuan000
  • niesiyuan000
  • 2017-12-25 10:50:45
  • 1090
收藏助手
不良信息举报
您举报文章:Hbuilder配置Avalon、Vue指令提示
举报原因:
原因补充:

(最多只允许输入30个字)