
点击后会打开一个ruby文件,下面是官方关于自定义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代码块结束
这里需要注意两点
- 在用$标识光标位置时还可以设置一个默认值,格式是${1:默认}
snippet 'c-test' do |cmd|
cmd.trigger = 'ctest'
cmd.expansion = '<div>
${1:test}
</div>'
end


- 文档中说修改完这个ruby文件后只要保存就可以了,但是我没有成功过,都是需要重启HBuilder才行,测试环境为macOS Sierra
网友评论