Emmet for Sublime Text 2 plugin

A work-in-progress official plugin for Sublime Text 2 with upcoming Emmet toolkit, previously called Zen Coding. This plugin will eventually replace the current one.

Warning: this plugin may not work at all in some OSes since it written in JavaScript and uses PyV8 and Google V8 binaries to run. If you experience problems or editor crashes please fill an issue.

How to install

You should remove or disable previous Zen Coding plugin, installed from Package Control, in order to operate properly.

1. Clone git repo into your packages folder (in ST2, find Browse Packages... menu item to open this folder)
2. Restart ST2 editor (if required)

Or with package control:

1. Package Control: Add Repository https://github.com/sergeche/emmet-sublime
2. Package Control: Install Package emmet-sublime
3. Restart ST2 editor (if required)

New features of Emmet (compared with old Zen Coding)

• Dynamic CSS abbreviations, automatic vendor prefixes and gradient generator.
• “Lorem Ipsum” generator
• Implicit tag names
• New Yandex’s BEM filter
• Extensions support
• New ^ operator
• Various fixes and improvements

Available actions

• Expand Abbreviation – Tab or Ctrl+E
• Interactive “Expand Abbreviation” — Ctrl+Alt+Enter
• Match Tag Pair – ⌃D (Mac) / Ctrl+, (PC)
• Wrap With Abbreviation — ⌃W / Shift+Ctrl+G
• Go to Edit Point — Ctrl+Alt+→ or Ctrl+Alt+←
• Select Item – ⇧⌘. or ⇧⌘, / Shift+Ctrl+. or Shift+Ctrl+,
• Toggle Comment — ⌘/ / Ctrl+/
• Split/Join Tag — ⇧⌘' / Shift+Ctrl+`
• Remove Tag – ⌘' / Shift+Ctrl+;
• Update Image Size — ⇧⌃I / Ctrl+U
• Evaluate Math Expression — ⇧⌘Y / Shift+Ctrl+Y
• Reflect CSS Value – ⇧⌘R / Shift+Ctrl+R
• Encode/Decode Image to data:URL – ⇧⌃D / Ctrl+'

Increment/Decrement Number actions:

• Increment by 1: Ctrl+↑
• Decrement by 1: Ctrl+↓
• Increment by 0.1: Alt+↑
• Decrement by 0.1: Alt+↓
• Increment by 10: ⌥⌘↑ / Shift+Alt+↑
• Decrement by 10: ⌥⌘↓ / Shift+Alt+↓

Extensions support

You can easily extend Emmet with new actions and filters or customize existing ones. In Emmet.sublime-settings, define extensions_path setting and Emmet will load all .js and .json files in specified folder at startup.

Overriding keyboard shortcuts

Sublime Text 2 is a great text editor with lots of features and actions. Most of these actions are bound to keyboard shortcuts so it’s nearly impossible to provide convenient plugin shortcuts for third-party plugins.

If you’re unhappy with default keymap, you can disable individual keyboard shortcuts with disabled_keymap_actions preference of Emmet.sublime-settings file.

Use a comma-separated list of action names which default keyboard shortcuts should be disabled. For example, if you want to release Ctrl+E (“Expand Abbreviation”) and Ctrl+U (“Update Image Size”) shortcuts, your must set the following value:

"disabled_keymap_actions": "expand_abbreviation, update_image_size"

You should refer Default (Your-OS-Name).sublime-keymap file to get action ids (look for args/action key).

To disable all default shortcuts, set value to all:

"disabled_keymap_actions": "all"

Not that if you disabled any action like so and you’re create your own keyboard shortcut, you should not use emmet_action_enabled.ACTION_NAME context since this is the key that disables action.

“Help! My snippets doesn’t work anymore in HTML/CSS files!”

By default, Emmet overrides Tab key behaviour and expands its own abbreviations instead native snippets. You can either disable this feature in user preferences (add "disable_tab_abbreviations": true setting into your Settings — User file) and use Ctrl+E or Ctrl+Alt+Enter to expand Emmet abbeviations or move your snippets to Emmet as described here. I’m investigating possibility to expand native snippets via Emmet Tab key handler.