Emmet — вёрстка со скоростью печати

1. Что такое Emmet и где он работает

Emmet — это движок сокращений, встроенный в VS Code, WebStorm, PyCharm и многие другие редакторы. В VS Code он уже установлен, ничего ставить не нужно. Работает он просто: вводишь аббревиатуру и нажимаешь Tab — вместо строки появляется развёрнутый код.

// пишем
div#main.container

// получаем после Tab
<div id="main" class="container"></div>

2. Базовые сокращения: теги, классы, id

Простое имя тега разворачивается в парный тег. Класс обозначается точкой, id — решёткой:

Если имя тега не указано, но есть класс, Emmet подставит div: .card → <div class="card"></div>.

3. Вложенность: >, +, ^

Три оператора структуры:

• > — вложить внутрь (child);
• + — поставить рядом (sibling);
• ^ — подняться на уровень выше (climb up).

// nav > ul > li
nav>ul>li
<nav><ul><li></li></ul></nav>

// header + main + footer
header+main+footer
<header></header><main></main><footer></footer>

// div > p ^ span (span уже вне div)
div>p^span
<div><p></p></div><span></span>

4. Множители: * и $

Оператор * повторяет элемент нужное количество раз:

// li*3
li*3
<li></li><li></li><li></li>

// ul>li.item*4
ul>li.item*4
<ul>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>

Символ $ вставляет номер повторения, а $@2 — стартует с 2, $@- — убывает:

// div.item$*3
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>

// li*4>a[href="#s$"] → ссылки #s1…#s4
<li><a href="#s1"></a></li>
<li><a href="#s2"></a></li>
<li><a href="#s3"></a></li>
<li><a href="#s4"></a></li>

5. Группировка в скобках

Круглые скобки собирают поддерево в один «блок», который затем повторяется или вкладывается:

// (header>h2+p)+footer
(header>h2+p)+footer
<header><h2></h2><p></p></header>
<footer></footer>

// ul>(li>a{Ссылка $})*3
<ul>
  <li><a>Ссылка 1</a></li>
  <li><a>Ссылка 2</a></li>
  <li><a>Ссылка 3</a></li>
</ul>

Скобки, умножение и нумерация вместе — это уже целые каркасы страниц одной строкой.

6. Текст {} и атрибуты []

Фигурные скобки вставляют текст внутрь тега, квадратные — атрибуты:

p{Привет мир}
<p>Привет мир</p>

a.btn[href="https://example.com" target="_blank"]{Кнопка}
<a href="https://example.com" target="_blank" class="btn">Кнопка</a>

img[src="img/a.png" alt="фото"]
<img src="img/a.png" alt="фото" />

7. CSS-сокращения

Emmet работает и в CSS: пишешь мнемоническое имя свойства — получаешь полное правило:

// m10-20 → margin: 10px 20px;
m10-20
// p10-20-30-40 → padding: 10px 20px 30px 40px
p10-20-30-40

8. Emmet в VS Code: настройка

В VS Code Emmet работает по умолчанию в файлах HTML, CSS и использует язык по расширению файла. Для JSX и Vue встречается контекст, где нужно указать языку:

{
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html",
    "plaintext": "html"
  },
  "emmet.triggerExpansionOnTab": true
}

• В JSX используй XHTML-вариант сокращений, например div.my даст <div className="my">;
• в файлах Vue Emmet включается внутри блоков <template>;
• бонус: Emmet подсказывает варианты в списке автодополнения — можно полностью не печатать.

9. Оборачивание выделенного: Wrap with Abbreviation

Частая задача — превратить готовый текст в структуру. Выдели строки и вызови Wrap with Abbreviation (в VS Code — Ctrl+Shift+P, затем «Emmet: Wrap», или сочетание Alt+Shift+W). Главный трюк — оператор * в конце сокращения: он помечает место вставки каждой выделенной строки.

// выделен текст из трёх строк
Красный
Зелёный
Синий

// сокращение ul>li* и Tab
<ul>
  <li>Красный</li>
  <li>Зелёный</li>
  <li>Синий</li>
</ul>

Нумерация $ тоже работает при оборачивании: section.s$>h2{Блок $}+p* разметит блоки с атрибутами s1, s2, s3 и заголовками внутри.

10. Пользовательские сниппеты

Стандартных сокращений хватает, но команда часто пишет одинаковые блоки: шапку страницы, карточку товара, модалку. Такие блоки оформляют как собственные сниппеты Emmet — в VS Code через файл фрагментов (Файл → Настройки → Пользовательские фрагменты → snippets.html.json).

{
  "card": {
    "prefix": "card",
    "body": [
      "<article class=\"card\">",
      "  <figure><img src=\"$1\" alt=\"$2\"></figure>",
      "  <h3>$3</h3>",
      "  <p>$4</p>",
      "  <a class=\"btn\" href=\"$5\">Подробнее</a>",
      "</article>"
    ]
  }
}

Переменные $1, $2 — позиции перехода по Tab после разворачивания. Сниппет появится в автодополнении и сработает по Tab.

11. Lorem ipsum и генерация текста

Дизайн-макеты и вёрстка требуют нейтральный текст-заполнитель. Emmet генерирует Lorem ipsum одной командой:

// lorem — 30 слов по умолчанию
lorem

// lorem5 — ровно 5 слов, lorem10 — 10 слов
lorem5
lorem10

// 3 абзаца по 7 слов внутри div
div>p*3>lorem7

// результат
<p>Lorem ipsum dolor sit amet.</p>
<p>Consectetur adipiscing elit sed do.</p>
<p>Eiusmod tempor incididunt ut labore.</p>

Латинский вариант используют чаще: он визуально плотнее и не отвлекает при проверке типографики. Русский Lorem активируется настройкой локали в редакторе.

12. Типовые ошибки и советы

Большинство ошибок Emmet — это особенности синтаксиса, которые легко упустить:

• div.class#id и #id.class дают разный порядок атрибутов, но HTML от него не зависит;
• текст в фигурных скобках не оборачивается в теги автоматически — p{Текст} вернёт <p>Текст</p>;
• оператор ^ поднимает ровно на один уровень: для двух уровней пиши ^^;
• сокращения регистро-чувствительны: Div ≠ div.

// удобная отладка вложенности
ul>li*3>a{Пункт $}

13. Emmet в других редакторах

Emmet — не привилегия VS Code. Движок встроен в WebStorm и PyCharm, устанавливается пакетом в Sublime Text (Emmet через Package Control), работает в Vim через плагин emmet-vim и в онлайн-песочницах вроде демо на emmet.io. Сокращения портируемы: одна и та же строка даёт одинаковый результат в любом инструменте — навык окупается всюду.

• JetBrains: Emmet активен по умолчанию, а нужные языки подключаются в Settings → Editor → Emmet;
• Sublime Text: после установки пакета достаточно напечатать сокращение и нажать Tab;
• Vim: emmet-vim разворачивает аббревиатуры в insert-режиме.

14. Каркас страницы одной строкой

Чаще всего Emmet применяют не для мелких фрагментов, а для каркаса документа. Сокращение html:5 разворачивает полный скелет HTML5: doctype, head с кодировкой и viewport, body.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

По той же схеме собираются меню, сетки и таблицы: menu>li*5>a или table>thead+tbody>tr*3>td*4. Готовый каркас наполняется реальным контентом, и отпадает рутинное копирование прошлых проектов.

15. Формы и инпуты

Формы — зона, где Emmet экономит больше всего времени. Базовые сокращения инпутов дают готовые теги с нужным типом:

Комбинация с вложенностью собирает форму целиком: form>label+input:email+but:s даст подпись, поле и кнопку отправки. Каркас атрибутов уже готов, останется дописать name. Такой подход ускоряет не только вёрстку, но и сборку прототипов для обратной связи.

16. Спецсимволы и автоматизация процесса

Длинный текст и спецсимволы — частая боль. Внутри {} символ $ распознаётся как нумерация: при множителе *3 сокращение p{Оплата $ руб.} даст «Оплата 1 руб.», «Оплата 2 руб.». Вывести литеральные «доллары» напрямую не получится, а квадратные скобки [] зарезервированы под атрибуты. Практичное правило: автоматизируй каркас, а специфичную длинную строку дописывай после разворачивания.

• не держи длинные тексты и логику в сокращениях — их сложно читать и править;
• Tab может перехватываться другими расширениями сниппетов — настрой emmet.triggerExpansionOnTab;
• комбинируй Emmet с множественным курсором VS Code: выделение + Wrap разметит асимметричный список за один проход.

Что дальше

Теперь создай реальную страницу: каркас header+main+footer, меню через ul>li>a, карточки через div.card$*6. Основы разметки — в курсе HTML, стилизация — CSS, а продвинутые стили — Sass.

← Вернуться к курсам