HBuilder 自定义html代码块

HBuilder 自定义html代码块_第1张图片

点击后会打开一个ruby文件,下面是官方关于自定义html代码块的说明

HBuilder 自定义html代码块_第2张图片
#如下是一个示例代码块,可以复制后再添加新代码块
  snippet 'div_class' do |cmd|  #div_class是显示名称,代码助手提示列表显示时可见
    cmd.trigger = 'divc'        #divc是激活字符,即按下divc后会触发该代码块
    cmd.expansion = "
$0
" #expansion是代码块的输出内容,其中$0、$1是光标的停留和切换位置。$1是第一个停留光标,$0是最后回车时停留的光标。 #如果输出涉及到换行和tab,也需严格在这里使用换行和tab。 #输出双引号在前面加\来转义,输出$使用\$(单引号中)或\\$(双引号中)转义 cmd.needApplyReContentAssist = true #这句话的意思是输出后同时激活代码助手,即在$1的位置直接拉出样式列表 end #div_class代码块结束

这里需要注意两点

  • 在用$标识光标位置时还可以设置一个默认值,格式是${1:默认}
  snippet 'c-test' do |cmd|
    cmd.trigger = 'ctest'
    cmd.expansion = '
${1:test}
' end
HBuilder 自定义html代码块_第3张图片
  • 文档中说修改完这个ruby文件后只要保存就可以了,但是我没有成功过,都是需要重启HBuilder才行,测试环境为macOS Sierra

你可能感兴趣的:(HBuilder 自定义html代码块)