Zen Coding is a plugin that works with many editors (Vim, Notepad++, TextMate, etc) for writing HTML (and other structured code) very quickly and efficiently. It's currently at version 0.7 but has been very stable for me.
The plugin expands abbreviated code you write. For example, it can expand:
html>head>title
to:
<html>
<head>
<title></title>
</head>
</html>
Installing the Zen Coding plugin for Vim is as easily as downloading zencoding.vim and installing it to your $HOME/vimfiles/ftplugin/html Directory. Now when you're editing an HTML file (:set ft=html) you can type an abbreviation like:
html:5
Then, while in either insert or normal mode, type:
Ctrl+y,
Again, that's ^y followed by a comma. And that should expand the HTML 5 template:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
There's a lot more you can do with it such as repeating tags. For example, say you want an unordered list containing four list elements with a class of incrementing items. Typing:
ul>li.item$*4 Ctrl+y,
Should expand to:
<ul>
<li class="item1">_</li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
</ul>
The "*" multiplies the element before with the number after it. And the "$" gets replaced by an incrementing number. Pretty cool, huh?
Notice the underscore inside the first LI tag. This is where your cursor would end up if you run this expression. Zen coding allows you to have jump to edit points. For example, typing "Ctrl+y n" would jump your cursor to to the next LI element. Typing "Ctrl+y N" jumps to the previous element.
Say you want to add a tag but not nest it. For example:
<p></p>
<a href=""></a>
Then just add a "+" (plus sign) between the tags to separate:
p+a Ctrl+y,
You can delete any tag you're in by typing: Ctrl+y k
To create any tag with a closing and end tag, just type the name of the tag:
foo Ctrl+y,
becomes:
<foo></foo>
To create:
<script type="text/javascript"></script>
Just type:
script Ctrl+y,
To make a DIV with an id of "foo": div#foo Ctrl+y,
To create a nested DIVs. You could, for example type:
div#foo$*2>div.bar Ctrl+y,
Which would expand to:
<div id="foo1">
<div class="bar">_</div>
</div>
<div id="foo2">
<div class="bar"></div>
</div>
To create tags that close themselves, such as a BR tag:
br Ctrl+y,
Becomes:
<br />
To comment out a block of HTML, just move your cursor to the start of the block of HTML and type: Ctrl+y/
If you visually select the block and type Ctrl+y, it will prompt for a tag to wrap the block inside of. You can even enter expressions here to wrap text into HTML. For example, if you had the text:
line1
line2
line3
You could highlight it and type Ctrl+y, ul>li* to convert it to:
<ul>
<li>line1</li>
<li>line2</li>
<li>line3</li>
</ul>
You can also apply "filters" at the end of your expressions. For example, adding "|e" will escape your HTML output so that >'s become <'s and so on. So typing a|e Ctrl+y, expands to:
<a href=""></a>
Another filter called "|c" adds HTML comments to important tags, such as tags with ID and/or classes. There's even a HAML filter.
I'll leave you with one more neat thing you can do with Zen Coding. You can add text to your expressions that will be placed in the corresponding position. For example:
p>{Click }+a{here} Ctrl+y,
Expands to:
<p>
Click <a href="">here</a>
</p>
Enjoy!
Thanks a lot, this post and the one on creating code snippets for programming languages (by snipMate) changed my way to write code and saved me a bunch of time.
ReplyDeleteYou could wrap the two methods with IE conditional tags ([if !IE] and [if IE]) so only one of them will actually be used depending on the browser, or you can come up with your own mechanism. If you are using GWT, deferred binding is perfect for this. Codcow
ReplyDelete