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

保存–完成！！