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

保存–完成！！