我是FE,也是Fe

前端来源于不断的点滴积累。我一直在努力。

统计

留言簿(15)

阅读排行榜

评论排行榜

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

posted on 2013-01-19 21:06 衡锋 阅读(17927) 评论(12)  编辑  收藏 所属分类: Web开发sublime text

评论

# re: sublime text 2 (四) Emmet(之前叫Zencoding)的安装以及新特征 2013-01-20 12:35 免费网络记事本

sublime Text2 还真是个好东西,windows下我用着,现在切到mac还是一直在用,这个编辑器非常不错,我喜欢!!  回复  更多评论   

# re: sublime text 2 (四) Emmet(之前叫Zencoding)的安装以及新特征 2013-01-30 10:28 车水码农

我是富士康的,sublime emmet什么的我都不知道,只对你最后句话感兴趣,最近想跳槽,你是哪个厂的?  回复  更多评论   

# re: sublime text 2 (四) Emmet(之前叫Zencoding)的安装以及新特征 2013-02-19 10:22 lauren

这篇文章才真正解决了我的疑惑,哈哈,谢谢分享!  回复  更多评论   

# re: sublime text 2 (四) Emmet(之前叫Zencoding)的安装以及新特征 2013-02-19 15:26 衡锋

@lauren
还赚了个粉丝。不客气:)  回复  更多评论   

# re: sublime text 2 (四) Emmet(之前叫Zencoding)的安装以及新特征[未登录] 2013-08-23 10:03 lili

我的2.02按照博主的方法,还是安装不上。win7系统  回复  更多评论   

# re: sublime text 2 (四) Emmet(之前叫Zencoding)的安装以及新特征[未登录] 2013-08-23 22:08 lu

你可能缺少pyv8@lili
  回复  更多评论   

# re: sublime text 2 (四) Emmet(之前叫Zencoding)的安装以及新特征 2013-09-03 16:33 qinqing

请问写完类似于这样的div#header语句后,同时要执行下快捷键Ctrl+, 吗  回复  更多评论   

# re: sublime text 2 (四) Emmet(之前叫Zencoding)的安装以及新特征 2013-09-03 20:46 衡锋

@qinqing
tab  回复  更多评论   

# re: sublime text 2 (四) Emmet(之前叫Zencoding)的安装以及新特征[未登录] 2013-10-31 10:47 xiaoxiao

我安装上了 怎么不行呢
  回复  更多评论   

# re: sublime text 2 (四) Emmet(之前叫Zencoding)的安装以及新特征 2013-10-31 11:38 衡锋

@xiaoxiao
最近Emmet插件有更新,安装起来不需要手动安装PyV8了。直接用Package Install就行可以。  回复  更多评论   

# re: sublime text 2 (四) Emmet(之前叫Zencoding)的安装以及新特征[未登录] 2014-01-27 14:53 Lee

我用ul>li*5 tab 怎么扩展不开  回复  更多评论   

# re: sublime text 2 (四) Emmet(之前叫Zencoding)的安装以及新特征[未登录] 2014-01-27 15:00 Lee

@Lee
试了好长时间 使出来了
要先保存文件....  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航: