Zencoding (Emmet) ile Hızlı kod yazın

Emmet (Eski adıyla Zencoding) metin editörleri için hızlı olarak HTML ve CSS yazmanıza fırsat sunan bir eklentidir. Bu eklenti sayesinde geliştirim hızınızı artırmanız mümkün. Ben daha çok Zencoding'i  HTML geliştiriminde ve WebStorm – IntelliJ IDEA editörleri ile birlikte kullanıyorum. Fakat sizler, favori editörünüz ile Zencoding kullanmaya başlayabilirsiniz.

Zencoding Örnekleri

Zencoding ile HTML elemanları oluştururken tag adı, id ve class adı gibi bilgiler kullanılmaktadır.

Örnek1

div.centered // press Tab

<div class="centered"></div>

Örnek2 

button#sender // press Tab

<button id="sender"></button>

 Örnek3

form>input+input+input+button // press Tab

<form action="">
<input type="text"/>
<input type="text"/>
<input type="text"/>
    <button></button>
</form>

Örnek4

form>input*3+button.red.round // press Tab

<form action="">
<input type="text"/>
<input type="text"/>
<input type="text"/>
    <button class="red round"></button>
</form>

Örnek5

ul>li*5 // press Tab

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Örnek6

h1{Başlık} // press Tab

<h1>Başlık</h1>

Örnek7

ul>li{Liste $}*5 // press Tab

<ul>
    <li>Liste 1</li>
    <li>Liste 2</li>
    <li>Liste 3</li>
    <li>Liste 4</li>
    <li>Liste 5</li>
</ul>

Örnek8

div[ng-controller="MainCtrl"] // press Tab

<div ng-controller="MainCtrl"></div>

Örnek9

input[type="email",value="rahmanusta@kodedu.com"] // press Tab

<input value="rahmanusta@kodedu.com" type="email"/>

Örnek10

{Devam etmek için}+a[href="https://kodedu.com"]{buraya}+em{tıklayınız} // press Tab

Devam etmek için<a href="https://kodedu.com">buraya</a><em>tıklayınız</em>

Tekrar görüşmek dileğiyle..