sublime text 2 (四) Emmet(之前叫Zencoding)的安装以及新特征

sublime text 2 (四) Emmet(之前叫Zencoding)的安装以及新特征

Sublime Text2 中Emmet(之前叫Zencoding)插件安装以及使用

Emmet插件安装

Emmet放出来有一段时间了一直安装失败，今天再仔细的看了文档在安装上。

在windows上安装时很有可能报错说PyV8安装失败，需要到一个github地址上去安装。详细的安装方法是：

官方说的用Package Control :install package 安装Emmet十有八九会报错。所以这里介绍手动安装过程：

• 先安装PyV8，点击此处选择适合的操作系统版本，将下载的zip包放在 Sublime Text 2的Package包中，可以通过ST2的菜单Preferences ->Browser Packages进入该文件夹，win7默认的是C:\Users\[用户名]\AppData\Roaming\Sublime Text 2\Packages将zip包解压出来的文件放到新建的PyV8文件夹中

• 下载Emment最新版此处解压到Packages文件夹中

• 重启 OK
  
  2013/10/31 update: 最近Emmet插件有更新，安装起来不需要手动安装PyV8了。直接用Package Install就行可以。

Emmet的新特征

默认的tag是div

.item [tab]
<div class="item"></item>

聪明的子标签嵌套规则，比如ul的子标签默认就是li

ul>.item*2 [tab]
<ul>
<li></li>
<li></li>
</ul>

^向上，相当于将当前的"上下文"放到父标签上，写dl>dt/dd的时候用的上

dl>(dt>p>a[name=dt$]^^dd{description$})*2 [tab]
<dl>
<dt>
<p><a href="" name="dt1"></a></p>
</dt>
<dd>description1</dd>
<dt>
<p><a href="" name="dt2"></a></p>
</dt>
<dd>description2</dd>
</dl>

$的功能增强

之前用zencoding的时候我想写一组checkbox各加上一个label,checkbox的name属性一致，但是id不一样，而且对应的label的for属性能对应到checkbox的id上。

(input:checkbox[name=cb1]#cbitem$$+label[for=cbitem$$]{label$})*2 [tab]
<input type="checkbox" name="cb1" id="cbitem01">
<label for="cbitem01">label1</label>
<input type="checkbox" name="cb1" id="cbitem02">
<label for="cbitem02">label2</label>

zencoding写出来的label和id是不能编号的。Emmet解决了这个问题。

其他的功能都是原来zencoding有的，给一些参考资料：

zencoding cheatsheet啥也不说了。赶紧去打印贴着吧。

分享7个超实用的Emmet（zen coding）HTML代码使用技巧直接激起了我再次安装emmet的兴趣

emmet at github 其实仔细看看文档上说的安装就应该简单。

好了,就写这么多,2013第一文，我厂的年会此时已经接近尾声了，今年的年会不能参加灰常遗憾。美女确实不错，呵呵。