Zen Coding w Visual Studio 2012

Zen Coding Po wpisie o “Less CSS” otrzymałem sugestie ,że powinien zainteresować się “Zen Coding”. Dlaczego nie? Pisanie div-ów trwa odrobinę za długo ,a Zen Coding to ciekawy sposób, który przyspieszy ten  proces wielokrotnie.

Zen Coding może być użyte  z Visual Studio dzięki dodatkowi Web Essentials.

Zen coding został stworzony w 2009 roku i oczywiście istnieje on do dzisiaj. Zdecydowanie jest to przyszłość pisania HTML-a. Wiele narzędzi wspiera Zen Coding. Ich lista jest naprawdę długa. Widzę ,że nawet powstają jego następcy.

Przejdźmy więc do rzeczy o co dokładnie chodzi.

Oto lista wspieranych skrótów Zen Coding w Visual Studio. Jak na razie grupowanie elementów nie jest wspierane.

• # tworzy atrybut id
• . tworzy on atrybut class
• [] tworzy atrybut określony w nawiasach kwadratowych n.p [href]
• > tworzy elementy niżej
• +tworzy element na tym samym poziomie
• ^ tworzy element wyżej
• *x mnożenie elementów gdzie “x” reprezentuje ich liczbę
• $ w miejsce symbolu zostanie wstawiona liczba, która jest inkrementowana
• $$ podobnie jak wcześniej ,ale teraz wygenerowane liczby będą miały więcej zer z przodu $$ 01,  $$$ 001
• {} tworzy element tekstowy. Wewnątrz nawiasów klamrowych umieść swój tekst

Jak to wygląda w praktyce?

Jeśli chcę szybko napisać  div-a z id “contentPane” oraz klasą “module” używam następującego skrótu.

<!-- Wpisz to plus <TAB> --> 
div#contentPane.module 

<!-- Rezultat --> 
<div id="Div1" class="module"></div>

Jeżeli chce stworzyć atrybut inny niż id i class używam wtedy nawiasów kwadratowych.

<!-- Wpisz to plus <TAB> --> 
a[href=#] 
    
<!-- Rezultat --> 
<a href="#"></a>

Mogę oczywiście tworzy w ten sposób wiele atrybutów na raz.

<!-- Wpisz to plus <TAB> --> 
input[placeholder="Name" type="text"] 
    
<!-- Rezultat --> 
<input type="text" value="" placeholder="Name" />

A oto jak utworzyć element ,a następnie element podrzędny niemu i tak dalej.

<!-- Wpisz to plus <TAB> --> 
div>span>a  
    
<!-- Rezultat --> 
<div>
    <span><a href=""></a></span> 
</div>

Elementy na tym samy poziomie też łatwo dodawać.

<!-- Wpisz to plus <TAB> --> 
footer>div>a+input 
    
<!-- Rezultat --> 
<footer>
    <div>
        <a href=""></a>
        <input type value="" />
    </div>
</footer>  

Czasami jednak występuje potrzeba przejścia wyżej w hierarchii elementów. Może przeskakiwać wyżej o kilka elementów na raz wpisując wielokrotnie ten sam symbol.Oto użycie tego znaku w praktyce.

<!-- Wpisz to plus <TAB> --> 
p>p>p>p^^span 
    
<!-- Rezultat -->
<p>
    <p>
        <p>
            <p></p>
        </p>
    </p>
    <span></span>
</p> 

<!-- Wpisz to plus <TAB> --> 
table>thead>tr+tr+tr+tr^tbody>tr+tr+tr+tr 
    
<!-- Rezultat -->
<table>
    <thead>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
    </thead>
    <tbody>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
    </tbody>
</table>  

Kto by jednak chciał pisać tyle plusów i znaczników html gdy przecież możemy mnożyć elementy. Oto poprawiony przykład wyżej.

<!-- Wpisz to plus <TAB> --> 
table>thead>tr*4^tbody>tr*4 
    
<!-- Rezultat --> 
<table>
    <thead>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
    </thead>
    <tbody>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
    </tbody>
</table> 

Dodanie inkrementowanej wartości też nie jest trudne.

<!-- Wpisz to plus <TAB> --> 
section>article.item$$$$$$*4 
    
<!-- Rezultat --> 
<section>
    <article class="item000001"></article>
    <article class="item000002"></article>
    <article class="item000003"></article>
    <article class="item000004"></article>
</section> 

Możesz także dodawać wartości tekstowe bez zmiany kontekstu wyrażenia.

<!-- Wpisz to plus <TAB> --> 
ul>li*2>{Zdzisław Bohater Galaktyki} 
    
<!-- Rezultat --> 
<ul>
    <li>Zdzisław Bohater Galaktyki</li>
    <li>Zdzisław Bohater Galaktyki</li>
</ul> 

Na koniec szybki przykład z Lorem Ipsum, czyli wypełnianiem tagów html bzdurną treścią tekstową.

<!-- Wpisz to plus <TAB> --> 
div*2>lorem2+span>lorem3 
    
<!-- Rezultat --> 
<div>
    Lorem ipsum.<span>Lorem ipsum dolor.</span>
</div>
<div>
    Dolor sit.
</div> 

Po wyrażeniu lorem możesz określić liczbę występujących wyrazów.

Miłego pisania HTML w Visual Studio 2012 życzę. Visual Studio powoli staję się porządnym narzędziem do pisania stron.