Snippet编写简要（Textmate、Emeditor代码片段通用）

如果你和我一样懒，而且经常打错字，肯定会喜欢代码补全。可是搜索了一下，发现关于这方面的中文文档很少，而且基本都没有涉及变换部分，于是自己根据英文文档整理一下，加了些例子。希望能对学习编辑代码片段的有一点帮助。

先是简单演示一下Snippet是什么：



这三句getElement都是由同一段snippet生成：

${1:document.}getElement${2/(T)|(C)|(I)/(?1:s)(?2:s)/}By${2:T}${2/(T)|(I)|(C)|.*/(?1:agName)(?2:d)(?3:lassName)/}('$3')$0

等号后面我要输入的，只有get TAB键，然后根据选择类型，打C I或者直接TAB就自动得到Class, Id或Tag选择句了。

必须承认这么一句看着是挺吓人的，不容易看懂。值得庆幸的是，各款代码补全是使用相同的语法。

再复杂的规则都来自简单的叠加，下面会一步一步介绍怎样做一个绑定事件的代码片段。document.addEventListener('event', callback, false);

一段snippet包括下面几个元素：

1. 纯文本

下面除了这三个字符要转义外： \ $ ` ，其它都是所见即所得。比如"document.addEventLister("字符串可直接生成。

2. 占位符

多次出现的同一个字符，比如同一个变量的名字，我们希望它可以保持一致，可以用占位符。占位符是$+数字，如$1,$2,$3,特别地，$0是退出占位符，在代码片段里面，通过TAB和Shift+TAB键在占位符键按数字顺序前后移动，但到了$0时，就退出了。

一段简单的循环：　　

for ( var i = 0 ; i < thing.length; i++)
{
thing[i]
};

　　显然， i 和 thing 前后都应该保持一致，也就是用同一个占位符，这个循环代码写成

for ( var $1 = 0 ; $1 < $2.length ; $1++ )
{
$2[$1]$0
};

　　$0就是写完$2后跳出的，就跳到thing[i] 的后面。实际效果如图：

3. 默认文本

　　上面实现了同一变量名保持一致，下面再在那基础上，为每个占位符添加默认文本，比如循环时。对$1位置默认为 i，$2为object的写法是：

　　${1:i}　　 ${2:object}

　　这是可以嵌套的，${3:function(${4:e})} 相当于$3时默认为function(e), $4为e。

4. 分支变换

　　到目前为止，我们已经能把开始那个目标，addEventlistener写出大部分了，不过要做到更简洁（比如默认是add，输入r自动转为remove），还要添上分支变换

　　这是最后也是比较难的一部分，需要一点正则表达式基础。

　　变换的格式是：

　　　　　　　　　　${No. /<<regexp>>/<<format>>/<<options>>}

　　　　　No. 表示占位符号；

　　　　　regexp是正则表达式，以捕获要变化的内容

　　　　　format是变换的具体内容，根据捕获内容选择

　　　　　options是正则的两个选项，i 和 g，忽略大小写和全局

　　还是addEventlistener，之前我们写成 ${1:add}Eventlistener，现在，增加变换，变成这样了：

　　　　　　　　　　${1:a}${1/(a)|(r)/(?1:dd)(?2:emove)/}EventListener

　　第一个${1:a}，就是默认是字符a，后面捕获$1的输入内容，判断是a还是r，然后在format里面，如果捕获的是a，也就是第一个括号，就添加dd，如果是r，就添加emove。

到此，我们已经能实现开始的目标，一个完整的监听函数代码可以看懂和写出来了：

　　　　${1:document.}${2:a}${2/(a)|(r)|.*/(?1:dd)(?2:emove)/}EventListener('$3',${4:function(e){}
　　　　 $0
　　　　},false);

还是来一幅图来演示一下劳动成果吧 o(≧v≦)o~~

后记：

　　代码片段还包括shell，宏这些应用，这些和编辑器和系统有一定关系，如果想进一步学习，可以参考编辑器的文档。文后有Textmate和Emeditor的代码片段文档。

参考来源：
http://www.emeditor.com/help/howto/plugin/plugin_snippets.htm http://manual.macromates.com/en/snippets