Всем привет! В этой статье мы с вами познакомимся с одним из наиболее популярных плагинов, предназначенных для “быстрого” тайпинга. К вашим услугам – Emmet (ex Zen Coding).
Данный плагин интересен, помимо всего прочего, тем, что написан на любимом всем фронтенд разработчикам языке javascript и потому хорошо переносим между различными платформами. Сейчас он представлен практически для всех известных IDE: Eclipse, Sublime Text 2, TextMate, Coda и пр.
Давайте просто напишем в редакторе div, нажмём tab (для Sublime Text 2, в вашем редакторе может быть и другая клавиша) и получим:
Данный плагин интересен, помимо всего прочего, тем, что написан на любимом всем фронтенд разработчикам языке javascript и потому хорошо переносим между различными платформами. Сейчас он представлен практически для всех известных IDE: Eclipse, Sublime Text 2, TextMate, Coda и пр.
Давайте просто напишем в редакторе div, нажмём tab (для Sublime Text 2, в вашем редакторе может быть и другая клавиша) и получим:
<div></div>Или, допустим, мы хотим создать ненумерованный список из 5 элементов, для этого пишем:ul>li*5
Результат:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>Работа с классами, дивами (элемент по умолчанию) и структурой также довольно проста. Создадим небольшой лэйаут:.container>.header+.main+.footer
Результат:
<div class="container">
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
</div>Или то же самое, но в стиле html5: .container>header+.main+footer:
<div class="container">
<header></header>
<div class="main"></div>
<footer></footer>
</div>Emmet прямо таки читает наши мысли! К примеру, если мы напишем просто a и нажмём tab, то результат будет такой:
<a href=""></a>Т.е. атрибут href дописывать не придется – Emmet обо всё позаботился за нас.
А как насчёт счетчика нумерации? И можно ли помещать текст внутри тегов? Давайте рассмотрим пример сложнее:
ul#nav>li.item$*4>a{Item $}
Нажимает tab
<ul id="nav">
<li class="item1"><a href="">Item 1</a></li>
<li class="item2"><a href="">Item 2</a></li>
<li class="item3"><a href="">Item 3</a></li>
<li class="item4"><a href="">Item 4</a></li>
</ul>Уделите время и поиграйтесь с этими параметрами: $, {text}, *. Это довольно забавно :)
Дополнительные атрибуты задаются очень просто:
input[name="client"]
<input type="" name="client">Возьмите себе на вооружение!
Источник:
