之前写过一篇文章《EmEditor代码片段插件介绍》，现在项目越来越多，越来越大，不再用EmEditor，而用IntelliJ IDEA。这个IDE能管理项目，而且也有类似的代码片段功能——Live Template。本文主要就是关于Live Template（模版）。

自定义变量

Live Template最核心的思想是通过一个字段（Abbreviation）来展开一个模版（Template），这样我们输入很少字符的字段，就能输出很多字符的模版，从而节省时间和精力。

模版中包含纯文本和变量。变量是两个美元符号$中间包含字符，比如$<variable name>$这样的格式。

举个例子，在设定字体大小的时候，往往需要同时设置px和rem两种单位，为了节省时间，我就创建了这个叫做fs的模版。

在IDEA中Ctrl+Alt+S打开设置，然后搜索Live Template，之后我们会看见很多group，比如html、css、zen css等，我这个模版是在css中触发，所以我在css group里新建一个模版。Group只是用来管理Live Template，跟在什么环境下触发没关系，还可以自己建一些group比如“项目” css group里新建一个fs模版

我设定的缩写是fs，属于css这个Group，描述是css中的font-size这个属性。

Template text中的文本我写的是

font-size:$v1$px;font-size:$v2$rem;

展开快捷键是默认的（Tab），最后只有在CSS上下文（注意，是CSS上下文，不是CSS文件，这样在HTML中的<style>里也是能展开这个Template的）中输入：fs（Tab）之后，就会出现下面的截图： 我随便设置了两个变量$v1$和$v2$，只是作为用户输入的一个placeholder，也可以是任何其他值。除了两个预设变量。

预设变量

IDEA自带两个变量，用户无法修改，一个是$SELECTION$。

$SELECTION$被用于“环绕模版”中，所谓环绕模版，就是当模版被展开的时候，被选择的文字会包含在模版之中。比如我创建一个模版如下：

这时候有两种方法来展开模版，方法一是通过缩写+指定快捷键，方法二是Ctrl+Alt+T，然后选择对应的模版，这个时候所有的包含了$SELECTION$的。

另一个预设变量是$END$，它表示模版结束的地方。

Expression

在编辑模板的对话框中点击Edit varibles按钮的时候，会出现一个对话框，其中可以编辑每一个变量的Expression。 Express中可以有3种值：

• 预设的函数，可能有参数，也可能没参数。Predefined functions with possible arguments.
• 双引号包围的字符串常量。String constants in double quotes.
• 其他变量的名字。The name of another variable defined in a live template.

预设的函数有一些会很有用，比如用time()输出当前的时间。

例子

以下是我用代码片段来给项目带来快捷的一些例子。从这些例子中主要可以看出使用代码片段的几个优势：

1. 一致性
2. 便捷性
3. 规范性

html

/[tab]——【说明】HTML注释

<!-- $END$ -->

a[tab]

<a href="##" title="$text$">$text$</a>$END$

ai[tab]

<a href="##" title="$title$"><img src="pic/sample.jpg" alt="$title$" /></a>

b[tab]

<b class="btn_$value$"></b>

div[tab]——【说明】div基本上都是有class的

<div class="$end$">

</div>

dl[tab]——【说明】节省输入

<dl>

	<dt></dt>

	<dd></dd>

	<dt></dt>

	<dd></dd>

</dl>

i[tab]——【说明】项目中约定用i标签做图标

<i class="ico_$end$"></i>

img[tab]——【说明】避免忘记alt文字

<img src="http://placehold.it/70x53" alt="$alt$" />$END$

jquery[tab]——【说明】在项目中经常需要做一些简单的动态演示，给前台开发使用，简单 演示我就用jquery来做

<!-- 前端演示脚本 开始 -->

<script src="http://qzonestyle.gtimg.cn/qzone_v6/html/api/js/jq.js" type="text/javascript"></script>

<script type="text/javascript">

</script>

<!-- 前端演示脚本 结束 -->

la[tab]——【说明】list里面包含一个a，这是常用的一种结构

<li><a href="#">$text$</a></li>$END$

CSS

CSS的代码片段更多的是为了浏览器兼容而设置。

/[tab]——【说明】简单注释

/* $VALUE$ */$END$

//[tab]——【说明】复杂注释，用来分页

/* ====  page: $start$ ==== */

db/di/dn[tab]

display:block;display:inline;display:none;

ib[tab]——【说明】跨浏览器的inline-block

display:inline-block;*display:inline;zoom:1;

radius[tab]——【说明】可以通过一个变量，一次输出数值

-moz-border-radius: $num$px; -webkit-border-radius: $num$px; border-radius: $num$px;

fs[tab]——【说明】设置正文的文字大小的时候，除了用px单位，最好还用rem单位来设置

font-size:$v1$px;font-size:$v2$rem;

lo[tab]——【说明】通过line-height和overflowhidden的方法来隐藏文字

line-height:900px;overflow:hidden;font-size:0;

opacy[tab]——【说明】参考资料<pre>filter:alpha(opacity=$n$0);-moz-opacity:0.$n$;-khtml-opacity: 0.$n$;opacity: 0.$n$;</pre> nowrap——【说明】不换行<pre>white-space:nowrap;width:100%;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;word-wrap:normal</pre><h3>总结</h3> 更多的代码片段我没有列出来，每个人需求不同，如果每次在完成某个任务、获得某种灵感的时候，把完成细节用代码片段总结出来，一定能越来越快越来越好。有的时候不知道如何把握代码片段复杂度，以下原则作为参考：

1. 很多情况下，冗余的代码就是健壮的代码。它是能够最大化容忍外部因素的不确定性的一种模式。
2. 代码片段应该保持较小的粒度。拿建筑学做比喻，代码片段是砖和三合板，而不是细小的沙子，也不是成型的小房子。