Про плагин Emmet узнал совершенно случайно, когда в редакторе Visual Studio Code нажал кнопку Tab после ошибочно введенного символа 'p' – текст заменился на <p></p>. Сначала подумал, что глюк, но попробовав то же самое с div, td и т.д. понял, что "это не баг, а фича".

Visual Studio Code очень быстро подсказывал синтаксис тэгов, потому необходимости в дополнительной автоматизации не было. Разве что неплохо бы научиться ему поддерживать Intellisense для подключенных таблиц стилей при html-верстке. Подсказка тэгов уже давно реализована в текстовых редакторах, например, Notepad++.

В случае с Emmet все немного иначе. Это не просто подсказчик синтаксиса, это по сути генератор сниппетов html и css кода. С помощью синтаксиса, по сути похожего на регулярные выражения, можно генерировать блоки кода, лишь введя несколько символов.

Emmet оптимизирован для html и css, но может быть также настроен на поддержку языков программирования.

Для использования плагина Emmet в Visual Studio Code нужно ввести паттерн для генерации кода и нажать кнопку Tab.

 

 

Таблица основных шаблонов для генерации HTML кода в плагине Emmet

Тип операции	Шаблон для генерации	Результат подстановки
Генерация дочерних тэгов	nav>ul>li	<nav> <ul> <li></li> </ul> </nav>
	div.row>div.form-group.has-success>label	<div class="row"> <div class="form-group has-success"><label for=""></label></div> </div>
Множитель тэгов	ul>li*5	<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
	ul>(li.item$*2>a)	<ul> <li class="item1"><a href=""></a></li> <li class="item2"><a href=""></a></li> </ul>
	ul>(li.item$@-*3>a)	<ul> <li class="item3"><a href=""></a></li> <li class="item2"><a href=""></a></li> <li class="item1"><a href=""></a></li> </ul>

 

Полное описание синтаксиса подстановки и замены доступно на странице http://docs.emmet.io/cheat-sheet/