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

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

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

| <br>li.item$*2<br> | ```xml

  • ``` | | --- | --- | | ```
    li.item$$$*2
    ``` | ```xml
  • ``` |

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

    | <br>ul+<br> | ```xml

         
    ``` | | --- | --- | | ```
    table+
    ``` | ```xml               
    ``` | | ```
    dl+
    ``` | ```xml
       
       
    ``` |

    Отдельно стоит отметить генератор текста “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/

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