Customize your Zencoding completions

Zencoding is great, but at some point you'll want to add some new snippets of your own, or modify existing ones to suit your development style. Here's how to modify your Zencoding settings to get more out of the tool.

This example is for Sublime Text 2, but will work just as easily with TextMate or any other editor that uses the Zencoding package.

First, open your zen_settings.py file, which declares relationships between snippets and the completed result.

open -e ~/Library/Application\ Support/Sublime\ Text\ 2/Packages/Zen\ Coding/zencoding/zen_settings.py

Scroll down to 'abbreviations'. For me it begins around line 580.

You'll see all of the stock abbreviations here (for instance, 'a' turns into an anchor tag). You can obviously change anything you'd like – but I'll show you some completions I've added to help with building quick'n'dirty HTML templates.

CSS Reset

'resetcss': ' --- a minified set of reset styles ---',

I'll usually make an inline stylesheet with 'style', drop this in, then start working from there.

LESS Stylesheet

'less:css': '<link rel="stylesheet/less" type="text/css" href="${1:style}.less">',

This creates a LESS stylesheet tag and drops the cursor in the href field.

Commonly-Used Javascript

Update: Coderwall didn't display these Javascript completions correctly -- so I've pasted them into this Gist: https://gist.github.com/3250779

I have shortcuts for most of the libraries I use: Less, Zepto, jQuery, Underscore, Backbone, ICanHaz, etc.

The Result

I can now make the following document in ~10 seconds! Zencoding might have helped with some of this, but customizing the completions has made it much, much more powerful.