Blog

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.)

The video cannot be shown at the moment. Please try again later.

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.

8 Responses


5 Comments

  1. […] lets you define a series of triggers for common typing tasks. In some ways this is like the Zen Coding extension I reviewed last time, but a bit […]

  2. Michael D says:

    Thank you for this demo, Raymond.

    I noticed angularJS folders during the video. Is there anything special you use to assist you working with that technology?

  3. Luu Thuc Xuong says:

    Hi guys, i have the brackets sprint 20 installed with emmet. After that, the menu of emmet is appeared on menu bar but there is no sign of emmet working.
    Please help, what is the problem. I thought it’s fine with emmet ?

  4. Chrstophe says:

    To obtain an update version of emmet download source on this url:
    https://github.com/emmetio/brackets-emmet

  5. sarhov says:

    after updating of brackets, I noticed that the Increment number by 1 and Decrement by 1 is not working, before updating it was working great by Ctrl + Up and Ctrl + Down.

    How can I resolve this problem

    And own more question is it possible to change shortcuts for Emmet?

  6. […] particular extension that is super useful is Emmet.io (Zen Coding) which facilitates ultra fast coding via easy to remember snippets. Here’s a […]

  7. […] Brackets (extensions intéressantes: emmet pour le zen coding) […]

3 Trackbacks


    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'thematic_pings' not found or invalid function name in /home/wp_twqxv4/blog.brackets.io/wp-includes/class-walker-comment.php on line 180

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'thematic_pings' not found or invalid function name in /home/wp_twqxv4/blog.brackets.io/wp-includes/class-walker-comment.php on line 180

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'thematic_pings' not found or invalid function name in /home/wp_twqxv4/blog.brackets.io/wp-includes/class-walker-comment.php on line 180

Post a Comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*
*


− eight = 1