Cloud9 Emmet Extension

A Cloud9ide extension for Emmet integration.

What is Emmet?

Emmet (known as Zen Coding) is a web-developer's toolkit that can greatly improve your HTML & CSS workflow.

Basically, most text editors out there allow you to store and re-use commonly used code chunks, called “snippets”. While snippets are a good way to boost your productivity, all implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime.

Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimized for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.

Installation

1. Go to your Cloud9 Workspace.
2. Go to Tools, and click Extension Manager.
3. Paste the following URL: https://raw.github.com/rmariuzzo/cloud9-emmet-ext/master/cloud9-emmet-ext.js, click Add, and click Done.

Voilà! You are ready to Zen Coding!

Available Actions

• Expand Abbreviation - CTRL + SHIFT + E

Upcoming Actions

• Match Tag Pair
• Go to Matching Pair
• Wrap with Abbreviation
• Go to Edit Point
• Select Item
• Toggle Comment
• Split/Join Tag
• Remove Tag
• Merge Lines
• Update Image Size
• Evaluate Math Expression
• Increment/Decrement Number
• Reflect CSS Value
• Encode/Decode Image to data:URL

Development

Follow these instruction to start developing:

1. Fork this git repo: http://github.com/rmariuzzo/cloud9-emmet-ext.git.
2. Clone your fork into Cloud9 IDE.
3. Start a terminal in Cloud9 IDE and type: npm install (this will download and install some dependencies).
4. In Cloud9 IDE go to Tools and click over Extension Manager.
5. Add the URL of your working copy: https://c9.io/<your-username>/cloud9-emmet-ext/workspace/cloud9-emmet-ext.js.

Now, you are good to code!