emmet

Emmet – the essential tool for web developers

emmetio

4,831,960

2,935

2.4.3

MIT

GitHub

Emmet plugin Atom editor

Emmet support for Atom.

Installation

Manual installation

You can install the latest Emmet version manually from console:

cd ~/.atom/packages
git clone https://github.com/emmetio/emmet-atom
cd emmet-atom
npm install

Then restart Atom editor.

Features:

Please report any problems at issue tracker.

Tab key

Currently, Emmet expands abbreviations by Tab key only for HTML, CSS, Sass/SCSS and LESS syntaxes. Tab handler scope is limited because it overrides default snippets.

If you want to make Emmet expand abbreviations with Tab key for other syntaxes, you can do the following:

  1. Use Open Your Keymap menu item to open your custom keymap.cson file.
  2. Add the following section into it:
'atom-text-editor[data-grammar="YOUR GRAMMAR HERE"]:not([mini])':
    'tab': 'emmet:expand-abbreviation-with-tab'

Replace YOUR GRAMMAR HERE with actual grammar attribute value. The easiest way to get grammar name of currently opened editor is to open DevTools and find corresponding <atom-text-editor> element: it will contain data-grammar attribute with value you need. For example, for HTML syntax it’s a text html basic.

You can add as many sections as you like for different syntaxes. Note that default snippets will no longer work, but you can add your own snippets in Emmet.

Default Keybindings

You can change these in Preferences > Keybindings.

Command Darwin Linux/Windows
Expand Abbreviation tab or shift + + e tab or ctrl + e
Expand Abbreviation (interactive) alt + + enter ctrl + alt + enter
Wrap with Abbreviation ctrl + w ctrl + alt + w
Balance (outward) ctrl + d ctrl + shift + e
Balance (inward) alt + d ctrl + shift + 0
Go to Matching Pair ctrl + alt + j ctrl + alt + j
Next Edit Point ctrl + ctrl + alt +
Previous Edit Point ctrl + ctrl + alt +
Select Next Item ctrl + shift + ctrl + shift + .
Select Previous Item ctrl + shift + ctrl + shift + ,
Toggle Comment + / ctrl + shift + /
Split/Join Tag shift + + j ctrl + shift + `
Remove Tag + ' ctrl + shift + ;
Evaluate Math Expression shift + + y ctrl + shift + y
Increment Number by 0.1 ctrl + alt + alt +
Decrement Number by 0.1 ctrl + alt + alt +
Increment Number by 1 ctrl + alt + + ctrl +
Decrement Number by 1 ctrl + alt + + ctrl +
Increment Number by 10 ctrl + alt + + shift + shift + alt +
Decrement Number by 10 ctrl + alt + + shift + shift + alt +
Reflect CSS value shift + + r ctrl + shift + r
Update Image Size ctrl + i ctrl + u
Encode/Decode image to data:URL ctrl + shift + i ctrl + '
Update Tag ctrl + shift + u ctrl + shift + '
Merge Lines shift + + m ctrl + shift + m

All actions and their keyboard shortcuts are available under Packages > Emmet menu item.

Extensions support

You can easily extend Emmet with new actions and filters or customize existing ones. In Preferences > Emmet, set Extensions path to folder with Emmet extensions. By default, it’s ~/emmet, e.g. emmet folder in your system HOME folder.