Zen Coding (Emmet.io) Brackets Extension

Article by: Raymond Camden

Zen Coding (Emmet.io) Brackets Extension

Today I’m going to talk about a feature that I’ve seen requested pretty much every time I’ve demoed Brackets – Zen Coding. Zen Coding is an editor feature that enables high-speed editing and navigating. It uses a CSS-like syntax along with key combinations to create HTML/CSS/XML markup quickly. To be honest, when I first heard of it I wasn’t terribly interested. But after seeing it in action, I’m sold.

The Zen Coding project has been renamed to Emmet and may be found at http://docs.emmet.io/. Emmet extensions exist for many editors including Brackets. You can find the official Emmet extension for Brackets on Github: https://github.com/emmetio/emmet/downloads.

Emmet’s main features fall into two broad categories – code abbreviations and editor navigation. Code abbreviations allow you to enter minimal CSS-like text and quickly expand it into full HTML. If you’ve ever needed to generate a table you will definitely appreciate this. The editor navigation allows for things like quickly selecting the parent tag or jumping to attributes. To show you this in action, I’ve created the following video. (Note, this should be set to HD, but if not, be sure to switch the quality or the code will look like mush.)

Want to learn more about Brackets extensions? Check out the extension development guide. You can also check out a list of other cool Brackets extensions.

Leave a Reply

Your email address will not be published. Required fields are marked *