Sublime Text 2以及Zen Coding

原文地址为: Sublime Text 2以及Zen Coding

去年就知道了 Sublime T ext 2这款编辑器,当时就颇有好感,还用了一段时间来进行开发。最近,偶然知道了还有Zen Coding这样的一个插件之后,简直对这个插件以及可以支持插件的Sublime Text 爱不释手。
 
先说什么是Zen Coding。
 
如果你用过jQuery,那么一定会对选择器有深刻的印象。Zen Coding由两个核心组件构成:一个缩写扩展器;一个HTML标签匹配器。
 
使用Ctrl + Alt + Enter 呼出ZenCoding,我们可以用 div#content>ul>li*3>a[href="javascript:void(0);"]{Links$} 这样短短的一句话,生成下面一段代码:
 
<did id="content">
     <ul>
          <li><a href="javascript:void(0);">Links1</a></li>
          <li><a href="javascript:void(0);">Links2</a></li>
          <li><a href="javascript:void(0);">Links3</a></li>
     </ul>
</did>
 
这样神奇的书写方式,配合Sublime Text 实时预览的功能,整个过程真是妙不可言。
 
Zen Coding 插件的安装
 
插件的安装过程在参考资料中说的非常清楚,这里摘录出来以备后用。
 
1、安装包控制 Package Control。
 
     使用Ctrl + `调出Console,然后输入以下代码并执行。
 
import urllib2,os;pf= 'Package Control.sublime-package' ;ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf), 'wb' ).write(urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ' , '%20' )).read())
 
2、重启Sublime Text 2,在Preferences->Package Settings中看到Package Control这一项表示安装成功。
 
3、通过Command + Shift+ P调出包管理,输入 Install ,选择Install Package
 
1810ee35e355d736f17a6201ed73fdcc
 
4、之后再输入zen coding来找到要安装的包,安装后就可以使用了。
 
Screen Shot 2012 06 30 at 上午9 28 14
 
安装完成后,我们就可以使用Ctrol + Alt + Enter 来呼出ZenCoding了。实际上,所有的安装包的路径,我们也可以直接下载ZenCoding的代码包,放到这个路径下。
 
Screen Shot 2012 06 30 at 上午9 31 13
 
除了Sublime Text 之外,Zen Coding还支持其他众多的编辑器,列表如下,看看有没有自己平时喜欢的编辑器吧。
 

Officially supported editors

Third-party supported editors

 
Zen Coding 的用法
 
使用ZenCoding编写代码时,需要遵循一定的缩写规则:
 
  • E
    元素名(div、p);
  • E#id
    带Id的元素(div#content、p#intro、span#error);
  • E.class
    带class的的元素(div.header、p.error),id和class可以连着写,div#content.column
  • E>N
    子元素(div>p、div#footer>p>span)
  • E*N
    多项元素(ul#nav>li*5>a)
  • E+N
    多项元素
  • E$*N
    带序号的元素
 
Sublime Text 中使用Zen Coding的一些技巧
 
1、缩写扩展(Expand Abbreviation)。
 
     之前知道,通过Control + Alt + Enter可以在一个新行中输入ZC的缩写,来生成代码。同时,如果我们在编辑中直接书写了ZC缩写,比如 div#content>p 当光标放置在p之后时,可以通过Tab键来扩展,ZC会从光标处开始向左侧搜索到第一个空白处,之间的代码作为ZC缩写,这样不必每次打开新行输入,提高了效率,缺点就是不能够实时预览。
 
2、嵌套代码(Wrap with Abbreviation)
 
207139100cd5233ca6b302c3b2756a21
 
如上图所示,可以实现在已经写好的代码外面嵌套其他的代码,实现方式是将光标放置到想要嵌套的标签上,然后使用Control + Alt + Enter 呼出ZC的命令行,就可以了。
 
其实Zen Coding还提供了很多方便代码编写的操作,例如标签匹配、返回上一个/下一个编辑点、更新img标签、合并行等,但是因为在Sublime Text中没有提供完整的支持,所以这些特性还无法使用。
 
参考资料:
3、 Zen Coding

转载请注明本文地址: Sublime Text 2以及Zen Coding
Python网络爬虫与推荐算法新闻推荐平台:网络爬虫:通过Python实现新浪新闻的爬取,可爬取新闻页面上的标题、文本、图片、视频链接(保留排版) 推荐算法:权重衰减+标签推荐+区域推荐+热点推荐.zip项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传,可轻松复刻,拿到资料包后可轻松复现出一样的项目,本人系统开发经验充足(全领域),有任何使用问题欢迎随时与我联系,我会及时为您解惑,提供帮助。 【资源内容】:包含完整源码+工程文件+说明(如有)等。答辩评审平均分达到96分,放心下载使用!可轻松复现,设计报告也可借鉴此项目,该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的。 【提供帮助】:有任何使用问题欢迎随时与我联系,我会及时解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件(如有),项目工程可直接复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值