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

179 浏览量更新于2023-03-16 评论收藏 174KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

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\">

</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

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 />