Emmet -- быстрый набор HTML и CSS

Emmet — плагин (встроен в VS Code), позволяющий писать сокращённые аббревиатуры, которые разворачиваются в полноценный HTML или CSS по нажатию Tab.

Зачем нужно

Написать ul>li*5>a и нажать Tab быстрее, чем вручную набирать 5 тегов <li> с тегами <a> внутри. Emmet многократно ускоряет написание вёрстки и избавляет от опечаток в HTML-тегах. Встроен в VS Code по умолчанию, без установки.

Где используется

  • Создание HTML-структур при вёрстке
  • Быстрое написание CSS-свойств
  • JSX в React (поддерживается в VS Code)
  • Любой редактор с поддержкой Emmet (VS Code, WebStorm, Sublime Text)

Основной контент

Основы HTML-аббревиатур

div                    → <div></div>
div.container          → <div class="container"></div>
div#app                → <div id="app"></div>
div.box.red            → <div class="box red"></div>
input[type=text]       → <input type="text">
a[href=#]{Click me}    → <a href="#">Click me</a>

Вложенность и умножение

ul>li*3
→
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

ul>li*3>a
→
<ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
</ul>

div+p+span
→
<div></div>
<p></p>
<span></span>

Нумерация с $

ul>li.item$*3
→
<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>

img[src=img/photo$.jpg alt=Photo $]*3
→
<img src="img/photo1.jpg" alt="Photo 1">
<img src="img/photo2.jpg" alt="Photo 2">
<img src="img/photo3.jpg" alt="Photo 3">

Текст с {}

p{Hello, World!}
→ <p>Hello, World!</p>

nav>ul>li*3>a{Item $}
→
<nav>
  <ul>
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
  </ul>
</nav>

Восхождение с ^

div>p>span^div
→
<div>
  <p><span></span></p>
  <div></div>
</div>

CSS-аббревиатуры

m10         → margin: 10px;
p10-20      → padding: 10px 20px;
w100p       → width: 100%;
h50vh       → height: 50vh;
df          → display: flex;
aic         → align-items: center;
jcc         → justify-content: center;
bgc#fff     → background-color: #fff;
fz16        → font-size: 16px;
fw700       → font-weight: 700;

Шаблон HTML5 (в пустом файле)

!   →  Tab

Разворачивается в полный HTML5-скелет с <!DOCTYPE html>, <head>, <body>.

Частые ошибки

  • Пробел в аббревиатуре — Emmet разворачивает аббревиатуру при нажатии Tab; пробел до Tab — Emmet не сработает
  • Аббревиатура не разворачивается в JSX — нужно включить Emmet для JSX в настройках VS Code: "emmet.includeLanguages": { "javascript": "javascriptreact" }
  • Путаница > и + — > вкладывает внутрь, + добавляет рядом (sibling)

Связанные темы

Ресурсы