/ DEV

Ускоряем верстку с Emmet

Emmet — это набор инструментов для различных текстовых редакторов, используемых для скоростного написания HTML и CSS кода.

В Sublime Text доступна установка через менеджер пакетов
Открываем командную панель комбинацией Сtrl+Shift+P и находим Package Control: Install Package. Нажимаем Enter, и теперь в списке пакетов находим пакет Emmet, снова нажимаем Enter, чтобы установить, и перезапускаем редактор.

Если вам по каким-то причинам не подходит этот способ, альтернативные методы всегда описаны на странице репозитория

В Visual Studio Code Emmet встроен по умолчанию, ничего дополнительно устанавливать не нужно.

В Notepad++ доступна через менеджер плагинов Plugin Manager. Перейдите Plugins > Plugin Manager > Show Plugin Manager найдите в списке плагинов Emmet и установите.

Другие методы установки на странице репозитория

Список других редакторов, подерживающих работу с Emmet здесь.

Emmet разворачивает короткие аббревиатуры в HTML теги и CSS свойства. Список досупных сокращений можете посмотреть в справочнике на сайте плагина. Эти сокращения можно комбинировать и создавать конструкции, которые будут разворачиваться в большие куски кода. Для этого в Emmet используются следующие селекторы:

  • # — создает атрибут id
  • . — создает атрибут class
  • [] — создает любые другие атрибуты, в том числе и пользовательские
  • > — делает переход на один уровень ниже
  • + — создает соседние элементы на том же уровне
  • ^ — делает переход на уровень вверх
  • * — умножает элементы
  • $ — заменяется числом, каждый раз увеличивающимся на единицу
  • {} — добавляет текстовое содержимое элементам
  • () — группирует элементы
  • : — используется для некоторых элементов, таких как <input>, <a>, <link> и др., и задает для них атрибуты

Например:

div#tabs>(ul>li*5>a[href="#tabs-$"])+div#tabs-$*5>p

Развернется в

<div id="tabs">
 <ul>
  <li><a href="#tabs-1"></a></li>
  <li><a href="#tabs-2"></a></li>
  <li><a href="#tabs-3"></a></li>
  <li><a href="#tabs-4"></a></li>
  <li><a href="#tabs-5"></a></li>
</ul>
<div id="tabs-1">
  <p></p>
</div>
<div id="tabs-2">
  <p></p>
</div>
<div id="tabs-3">
  <p></p>
</div>
<div id="tabs-4">
  <p></p>
</div>
<div id="tabs-5">
  <p></p>
</div>
</div>

Преимущества Emmet становятся очевидны, когда возникает необходимость написания большого количества однотипного кода с многократным повторением одних и тех же элементов. Но на этом его возможности не заканчиваются. Изучите документацию и начните верстать быстрее!