Официциальная страница - Emmet Documentation
Шпаргалка - Cheat Sheet
Emmet - эффективный плагин для быстрого написания HTML и CSS кода. Написание HTML-кода занимает много времени за счёт ввода тегов, атрибутов, кавычек, скобок и так далее. Продвинутые текстовые редакторы немного помогают, но этого недостаточно. Emmet может значительно упростить написание кода за счёт преобразования простых аббревиатур в полноценные блоки кода.
Аббевиатур слишком много для запоминания, поэтому вы будете пользоваться только некоторыми из них постоянно, остальные можете смотреть в документации по мере надобности.
Получить базовую структуру HTML-документа можно через аббревиатуру html:5 или просто ! - получите полноценную заготовку.
Синтаксис Emmet очень похож на CSS селекторы. Например, есть тег его идентификатор.
p#description
// результат
<p id="description"></p>
Используем тег, класс и идентификатор.
p.bar#foo
// результат
<p class="bar" id="foo"></p>
Чтобы задать элементу какой-то текст, его значение пишем в фигурных скобках. К примеру h1{foo} преобразится в:
<h1>foo</h1>
Квадратные скобки используются для добавления атрибутов и их значений. К примеру, a[href=#] преобразится в:
<a href="#"></a>
Можно вкладывать элементы друг в друга. Родительский элемент ставится перед знаком >, а все внутренние элементы должны идти за ним. Знак + позволяет соединить несколько аббревиатур, так что сгенерированный код будет идти друг за другом. Новый оператор под знаком ^ позволяет подняться на один уровень выше.
С помощью знака *, вы можете определить, сколько раз должен напечататься нужный вам элемент. Таким образом, аббревиатура ul>li*3 преобразуется в:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
Как на счёт комбинации оператора умножения и нумерации? Просто поставьте знак $ в конце названия атрибута или элемента, к примеру, ul>li.item$*3 превратится в:
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
Хотите задать элементу ширину. Для этого просто напишите w100:
width: 100px;
Значение px ставится по умолчанию. Для другой единицы измерения используйте специальные символы. К примеру h10p+m5e:
height: 10%;
margin: 5em;
Список возможных значений:
С помощью выражения @f, вы можете получить код:
@font-face {
font-family:;
src:url();
}
Специальные аббревиатуры lorem или ipsum позволяют сгенерировать текст-рыбу. Также вы можете указать, сколько слов нужно сгенерировать. К примеру, lorem10 преобразуется в:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, fuga!
Также lorem ipsum можно смешать с другими элементами. К примеру, p*3>lorem5.
Многие текстовые редакторы уже поддерживают Emmet: