The cool thing about Submine Text 2 is you can literally sit all day talk about its many features and plugins.
We’ve already talked LiveReload, Edit History, Distraction-free mode, ColorPicker, and Placeholders, and today we’re going to bring out the Karma of Sublime Text 2 by installing (and taking a look at) the Zen Coding plugin.
For those of you who wouldn’t be familiar with Zen Coding, it is a set of plugins for text editors that allow for high-speed coding and editing in HTML, XML, XSL, and other structured code formats via content assist. Created by Sergey Chikuyonok in 2009 and actively developed by the Zen Coding community, the plugin has been integrated in all text editors, TextMate, Coda, Espresso and sublime Text to name only a few.
Right, so let’s get down to business, use your Package Control to install Zen Coding.
Once this done, you can start using the full power of the plugin by entering code ‘shorthands’, tab away and start saving you some valuable coding time.
Examples
Simply type your elements such as html, body, or div and use the tab key to get the corresponding HTML elements.
<html></html> <body></body> <div></div>
Here are more advanced examples:
Type link:css and use the Tab Key to get the link to your style.css.
Same thing with a table 2 rows 3 columns: table>tr*2>td*3 + TAB
The ‘ * ‘ sign will be your multiplier, while the ‘ $ ‘ sign will increment automatically.
Hence, ul>li*3 + TAB will get you a nice unordered list with 3 items.
ul>li#id-$*6>a[href=# title=title-$] + TAB will display an unordered list of 6 items, each of them having a specific ID and containing a blank link with a specific title… How about that.
… while html>head+body>nav>ul>li.first+li*4+li.last + TAB will give you this:
On top of that, you can even use wrap tags to play with plain data.
For example, you are building the navigation menu of your next site, and have started entering the titles of the sections like so:
About Portfolio Blog Contact
Simply select the four sections.
Use Ctrl+alt+enter and start typing your Zen Coding wrap tag (haiku), in this case nav>ul>li* will get the job done. Note, you don’t even need to specify the number of list elements. The * multiplier will be enough, clever little bugger.
You get the point I guess, so here’s the full list: Zen Coding Cheat Sheet.
I don’t reckon you should go overboard with long combinations of shorthands but having been playing with this plugin for quite some time now, i can guarantee Zen Coding is a great way to improve your productivity in coding.
My name is Flo Preynat and I am the freelance webdesigner and developer behind shoogle designs. I live in France and specialize in responsive web design. Give me a shoogle or get in touch with me on twitter.
Follow @shoogledesigns
