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第一文,我厂的年会此时已经接近尾声了,今年的年会不能参加灰常遗憾。美女确实不错,呵呵。