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.)The YouTube ID of NhVdn7_ub5k?modestbranding=1&vq=hd720 is invalid.