分享 创建于2012年11月26日 [322]
秒速布局!前端人员必备:Notepad++& Zen Coding

今天给Notepad++升级的时候发现这个编辑器是带有插件功能的(实在太后知后觉了)。因为该编辑器查看前端页面代码还是蛮方便的所以我百度了一下他的插件,一个名为Zen Coding的插件引起了我的注意——实现秒速布局。

我机子上的Notepad++一直在打酱油,当初安装他的目的是图个方便在系统中右键打开一些.ini文件或者修改host以及各种非文档类的文件,例如无损分轨文件CUE等。

 

当我看到以下这张GIF演示图,我就不是这样想了:

zen-coding.gif

↑动态演示图,只是它强大功能的一部分而已。它无视了编辑器的自动提示和自动完成,秒杀了你自定义的各种快捷键或者 AHK 的热字符串,以智能简洁高效的缩短输入,带给你超快速地书写各种复杂而枯燥的 HTML 和 CSS 代码的体验。

 

如果动态演示图对你的吸引力不够的话,再看看视频:

↑这个视频已经足以吸引一大群前端设计师与网页架构师了。

 

举一个复杂的例子:zen-coding 可以把这样的代码:div#header>ul.navigation>li*4>a,变成下面的 HTML 代码:

<div id=”header”> <ul class=”navigation”> <li><a href=””></a></li> <li><a href=””></a></li> <li><a href=””></a></li> <li><a href=””></a></li> </ul> </div>

 

看到这熟悉的语法结构,会 CSS 的朋友一定会惊声尖叫!最妙的是那个“*4”,直接生成 4 个 li 代码了。没错,Zen Coding 就是这样牛叉的东西,Zen Coding分为 Zen HTML 和 Zen CSS 两部分。这两部分功能是以插件的形式来实现的。如果你用 NetBeans、SlickEdit、Sublime、TextMate、TopStyle、UltraEdit、WebIDE and IntelliJ IDEA、Dreamweaver、Aptana 都可以在官方下载页面找到相关的插件。顺便一提,Zen Coding支持Dreamweaver噢!

即使你不使用上面提到的编辑器,那么还有一种选择,点击下载页面的最后一个链接: Zen Coding for <textarea>。这是一个网页版的 Zen Coding!打开 example.html 之后,把光标定位到文本框里面,按下 Ctrl + E 试试吧。

 

是否十分心动呢?还是自己动手试试吧,下面是下载地址:

【Notepad++】 官方下载地址 【Zen Coding】 官方下载地址

 

 

附录:网页版快捷键说明

  1. Ctrl + E:展开代码
  2. Ctrl + D:向外快速选中代码块
  3. Shift + Ctrl + D:向内快速选中代码块
  4. Shift + Ctrl + A:输入一个缩写,自动展开并包围所选代码
  5. Ctrl + Alt+→ :光标智能跳转到下一个编辑点(自己试试就知道多体贴了)
  6. Ctrl + Alt+←:光标智能跳转到上一个编辑点
  7. Ctrl + L:选择一行

 

添加新评论
登录管理
︿