Использование плагина Emmet в Visual Studio Code

Про плагин 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.

 

Использование плагина Emmet в Visual Studio Code

Использование плагина Emmet в Visual Studio Code

 

Таблица основных шаблонов для генерации 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/