Emmet eski adıyla Zen Coding, html sayfalarını yazma işlemini kolaylaştıran bir eklentidir. Bu eklentiyi kod editörümüze kurmamız gerekmektedir. Ancak Visual Code editörünün içersinde kendiliğinden geldiği için ek bir kuruluma gerek yoktur. Emmet eklentisinin kendi sitesinden dökümanlarına buradan erişebilirsiniz.
Aşağıda vereceğim örnekler HTML5 dili ile Visual Code editörü üzerinden yazılacaktır. Yazılan kısa syntaxlardan sonra TAB tuşuna basmamız gerekmektedir.
! + Tab
!+TAB ile html iskeletini kısayoldan yazmış oluruz.
div#id_etiket
# işaretinin ardından gelen yazı div’in içerisine id olarak eklenir.
div.class_etiket
. işaretinin ardından gelen yazı ise div’in içerisine class olarak eklenir.
div.btn.btndanger
. işareti ile class oluşturduktan sonra tekrar class vermek için tekrar . işaretini kullanabiliriz.
div+div
+ işareti ile aynı seviyede iki div açmış oluruz.
div>div
> işareti ile de div’in içerisine bir alt seviyede div eklenir.
div+div>ul>li>p^li>p
^ işareti ile bir üst komut satırına çıkıp devam edebiliyoruz.
div+div>ul>(li>p)*2
Bir üstteki yazdığımız emmet syntaxının daha kolay yazımı için bu komutu kullanabiliriz. () içerisine alıp *3 yazarsak aynısını 3 kere gerçekleştirecektir.
ul>li.eleman$*3
3 tane sıralı eleman eklenecektir. (eleman1, eleman2, eleman3)
ul>li.eleman$$*3
3 tane sıralı eleman eklenecektir. (eleman01, eleman02, eleman03)
ul>li.eleman$@3*3
3 tane sıralı eleman eklenecektir ancak birinci eleman 3 ile başlayacaktır.
a{Buraya Tıklayınız}
{} işaretleri arasına istediğimiz yazıyı yazabiliriz.
p{Yazı1}+a{Yazı2}+p{Yazı3}
Birbirinin içine girmeyen üç adet etiket
p{Yazı1}>a{Yazı2}^p{Yazı3}
p etiketi içerisnde a etiketi ve onlarla aynı hizada olan bir p etiketi daha
p>lorem10
lorem ifadesi ile random kelimeler ekrana verilir. lorem10 dersek 10 adet kelime verilecektir. Bu sayıyı istediğimiz kadar arttırabiliriz.
(header{HeaderKısmı}>ul.nav>li*5)+footer>p{FooterKısmı}
Geniş şekilde yazılmış, header ve footer kısmı olan bir html kodunu emmet ile tek satırda yazma kolaylığını elde etmiş oluyoruz.
0 yorum:
Yorum Gönder