sublime&&Hbuilder扩展常用代码块

一、sublime

1、tools-developer-New snippet获得如下模板：

<snippet>
<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<!-- <tabTrigger>hello</tabTrigger> -->
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>

content—输出表达式内容

tabTrigger—提示快捷键

${1:this}

—默认补全代码之后的光标位置及默认内容this.

${2:snippet}—补全代码之后按tab键光标的第二默认位置及内容

2、遵循如上规则对模板就行修改，例如：

<snippet>
<content><![CDATA[
<a href="${1:this}" title="">${2:snippet}</a>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>a</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>

3、将文件以 sublime-snippet 为后缀保存在Sublime Text 3\Packages\User默认目录下，就完成了对以a作为快捷键的代码块的创建保存。任意输入a+tab就能方便的调用保存好的代码块

<a href="this" title="">snippet</a>

二、Hbuilder

工具—扩展代码块–自定义html代码块

进入代码块模板之后按提示添加自定义代码块

#可复制一段命令，在下面开始制作新命令
snippet 'img_a_src' do |cmd|  #div_class是显示名称，代码助手提示列表显示时可见
cmd.trigger = 'img_a_src'        #divc是激活字符，即按下divc后会触发该代码块
cmd.expansion = "<img src=\"$1\" alt=\"\" title=\"\" />$0"                         #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

保存–完成！！