Быстрое создание HTML в Visual Studio 2012 с Web Essentials 2012

Наверное любой веб-разработчик сталкивается с необходимостью набирать HTML код. Пусть даже это временные заготовки, необходимые до момента готовности дизайна сайта. Это не самое увлекательное занятие – печатать подряд одни и те же элементы. Так может упростим и ускорим данный процесс?

Что нужно для работы?

Для достижения поставленной цели необходимо установить дополнение Web Essentials 2012 для Visual Studio 2012. Оно содержит много полезного для веб-разработчика функционала. Но сейчас остановимся только на одной его возможности: поддержке Zen-Coding.

Начнем с примера

Сама идея Zen-Coding проста: зачем набирать множество тегов, зачастую повторяющихся, если все это можно записать упрощенно в одной строке. Вот, например, набранная при редактировании HTML строка:

div#page>div.logo+ul#navigation>li*5>a

После нажатия кнопки Tab она развернется в следующую конструкцию:

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>

Синтаксис Zen-Coding простой и интуитивный настолько, что уже из приведенного примера можно понять половину его правил. Тем не менее, рассмотрим все возможности, доступные c Web Essentnal 2012.

Синтаксис Zen-Coding

Ниже приведена таблица синтаксических элементов с примерами:

Элемент Описание Пример Результат примера
E Элемент div
<div>
</div>
E[attr] или E[attr=value] Элемент с заданным атрибутом attr и его значением value td[colspan=2 data-myindex]
<td colspan="2" data-myindex="">
</td>
E#name Элемент с id=name div#header
<div id="header">
</div>
E.className Элемент с заданным классом className div.adverts
<div class="adverts">
</div>
E>E1 Элемент E1 вложен в E div>span
<div>
    <span></span>
</div>
E+E1 Элемент E1 на одном уровне с E div+span
<div></div>
<span></span>
E^E1 Элемент E1 переходит на 1 уровень выше Е div>span^a
<div>
    <span></span>
</div>
<a href=""></a>
E*N Повтор N раз элемента E a*3
<a href=""></a>
<a href=""></a>
<a href=""></a>
E{text} Текст a{click here}
<a href="">click here</a>

Специальные конструкции

Можно использовать символ $ в названиях классов. При генерации HTML он будет заменен на порядковый номер повторяющегося элемента. При этом, использование нескольких символов $ приведет к дополнению нулями слева до заданного числа символов:

li.item$*2
<li class="item1"></li>
<li class="item2"></li>
li.item$$$*2
<li class="item001"></li>
<li class="item002"></li>

Есть ряд сокращенных конструкций:

ul+
<ul>
    <li></li>
</ul>
table+
<table>
    <tr>
       <td></td>
    </tr>
</table>
dl+
<dl>
    <dt></dt>
    <dd></dd>
</dl>

Отдельно стоит отметить генератор текста "Lorem ipsum". Для этого используется объявление lorem, вместе с которым можно указать требуемое число слов. Например:

div>lorem

<div>Lorem ipsum dolor sit amet, 
consectetur adipiscing elit fusce vel sapien 
elit in malesuada semper mi, id sollicitudin 
urna fermentum ut fusce varius nisl ac ipsum 
gravida vel pretium tellus.</div>

ul>li*3>lorem5

<ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Consectetur adipiscing elit fusce vel.</li>
    <li>Sapien elit in malesuada semper.</li>
</ul>

Разумеется, можно комбинировать объявления. Например:

span#one.s1.s2 

<span id="one" class="s1 s2"></span>

div#myid>
span.first[data-bind="firstName"]+
span.last[data-bind="lastName"]+
span.rating

<div id="myid">
    <span class="first" data-bind="firstName"></span>
    <span class="last" data-bind="lastName"></span>
    <span class="rating"></span>
</div>

К большому сожалению, поддержка групп вида (E1+E2) не работает в текущей версии Web Essentials 2012.

Остается только привести адрес сайта проекта Zen-Coding: http://code.google.com/p/zen-coding/

И не теряйте времени зря.

Комментарии (11) -

И зачем єто нужно...........для себя как разработчика не вижу смысла в таком функционале

@ luzer: Формат MVC позволяет одновременно писать код, выводя данные используя временный шаблон, и делать дизайн веб-приложения.

Хотя, если вам не приходилось иметь дело с созданием HTML, то, наверное, вам это не надо.

Пользуюсь активно Web Essential последние 3 месяца, а про поддержку Zen Coding — не знал. Вот спасибо! Увеличивает продуктивность в разы!

Из минусов Web Essential — автоформат HTML документа время от времени вызывает ступор студии, из которого её можно вывести только через диспетчер задач Frown

Потрясающая штучка, давно пользуюсь, привык, очень удобно!
Про поддержку Zen Coding узнал из блога папы Джона Smile) - писал кипятком от счастья!!! Наконец-то!!!

За это подробное руководство на русском огромное Вам спасибо, думаю оно окажется полезным очень многим. В закладки!
Ну а Zen Coding позволяет реально экономить время и заставляет думать. Главное заставить себя попробовать это. Да - не привычно по началу. Но ведь потом думаешь только о том: почему я не заставил себя использовать это раньше???
Нужно просто попробовать!

zen для css не будет поддерживать?

@ Глеб: Это лучше у автора расширения спросить или даже предложить.
webessentials.uservoice.com/forums/140520-general

Установил - не работает. Только последний тег в цепочке отрисовывает, и то если без доп. параметров (аттр, класс и т.д.). Работаю в VS 2012 RC

@ Denis: Первая же строка в описании на Visual Studio Gallery:
Important! This extension only works in Visual Studio 2012 RTM - not Beta or RC.

@ Andrey:
Спасибо, не заметил второпях!

Очень неудобно читать текст сбоку.

@ Alex да, после смены дизайна форматирование в этой статье вышло не очень. Поправил чтобы было удобнее читать. Спасибо за сообщение.

Добавить комментарий