Emmet Nedir?

Selamlar,

Bugün Visual Studio Code ile defualt gelen Emmet üzerine konuşacağız. Emmet, html sayfalar da codelamayı çok hızlandıran, kendine özgü kolay syntax’ı olan önceden bahsettiğim Zen Coding‘in yeni adı ve daha modern bir halidir.

Aşağıdaki code yazılarak demo amaçlı “html” bir sayfa oluşturulur.

Şimdi gelin isterseniz örnekler ile Visual Studio Code kullanılarak neler yapabileceğimizi bir görelim.

HTML5 Page Structure : Html bir sayfa için gerekli iskelet, aşağıdaki tuş kombinasyonu ile oluşturur.

! + Tab

emmet_body

Html Elementlere Id ve Css tanımlama: İlgili element’e #” ile id tanımlaması, “.” ile css tanımlaması yapılır. Örnek kullanımları aşağıdaki gibidir.

1-) div#emmetdiv

2-) div.table.tbl_funcy

emmet_div5

Ekeleme ve Bir Alta İnme : “+” ile aynı seviyede 2 html element birleştirirken, alt kırılıma “>” işareti ile inilmektedir. Örneğin aşağıdaki örnekte bir div’e aynı seviyede yeni bir div eklenmiş daha sonra bir alt kırılıma “p” ve onunda altına “ul” son olarak en alt kırılıma “li” eklenmiştir.

div+div>p>ul>li

sibling

Akışta Yukarı Bir Çıkma : Aşağıdaki örnekde “em”elementinin bir üstüne “bq” konulmuştur.

div+div>p>span+em^bq

climb

Gurup ve Çoklama :“()” ile ilgili html element alanı guruplanır, ayrıca “*3” ile ilgili elementin tekrarlanma sayısı belirlenir.

div>(header>ul>li*2>a)+footer>p

4

Sıralı artan elemanlar:  $” ile sayısal olarak 1’den başlayıp birer artacak sıralamanın basamak sayısı belirlenir. Kaç basamak olucak ise o kadar “$” işareti konur. Son olaraka gelinecek son sıralama sayısı belirlenir.

ul>li.item$*5

multi

Sıralı azalan 3 basamaklı dizim : Azalma işlemi için “@-” işareti konur. Böylece belirlenen sayıdan itibaren birbir geriye gidilir. Ayrıca “$$$” işereti ile azalma işlemi 3 basamak üzerinden yapıla bilmektedir.

ul>li.item$$$@-*6

reverse

Yazı : Htlm elementler arasına “{}” işareti ile istenen yazı yazılabilir.

p>{Tıkla }+a{detay}+{ devamı…}

text

Genel Örnek : Yukarıda kullandığımız kavramları toplu olarak bu örnekte inceleyeceğiz.

(header>ul.nav>li*4>item$*2)+footer

general

Kısa tanımlamalar : Alttak örnekde “table>tr#row$*4>td[colspan=2]” yerine kısa yazımı gösterilmiştir. Aynı durum “ul>li.item*3” içinde geçerlidir.

table>#row$*4>[colspan=2]
ul>.item*3

short

Lorem Ipsu (Test amaçlı yazı): Bu örnekde Lorem ile dummy text nasıl yazılır onu göreceğiz. Lorem10 yanına konan 10 yazılacak kelime sayısını belirtmektedir.

ul.generic-list>lorem10.item*4

lorem

Geldik bir makalenin daha sonuna. Emmet ile işlerin ne kadar kolaylaştığını hep beraber gördük.

Yeni bir makalede görüşmek üzere hoşçakalın.

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

2 Cevaplar

  1. Mehmet dedi ki:

    Hatirladigim kadariyla ilk aptana studio da gelmisti bu ozellik. Cok etkilemisti beni. V.S+ Resharper + NDepend uclusunden vazgecemeyen arkadslar icin. Resharper in bununla ilgili bir eklentisi mevcuttu.

  2. sesli chat dedi ki:

    teşekkürler.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir