Visual Studio Zen Coding(Yeni Adı ile Emmet), Kod yazarken bazen çok sık yaptığımız veya tekrar yazmak zorunda kaldığımız kodlar artık uzun gelmeye başlayabiliyor yada sıkıcı gelmeye başlayabiliyor bu sıkıcılığı gidermek zevkli ve pratik hale getirmek için Zen Coding’i kullanacağız.
Visual Studio Zen Coding-Emmet İle Kısa Sürede Kodlama
Visual Studio ile Zen Coding yada yeni adı ile Emmet yapısını kullanmak isterseniz Web Essential eklentisini yüklemelisiniz. Bundan sonra Zen Coding’den yeni adı olan Emmet diye bahsedilecektir.
Bazı Emmet kısayollarına aşağıdaki tablodan ulaşabilirsiniz.
| Kısayol | Açıklama |
|---|---|
| # | ID özelliği |
| . | Class özelliği |
| [ ] | Elemente özellik ekleme |
| > | Elemente alt elementler ekler |
| { } | Elemente metin ekler |
| + | Elementin yanına element ekler |
| * | Elementin kaç defa üretileceğini belirtir |
| $ | Otomatik sayısal artışlı değer bastırma |
| ^ | Parent’a çıkıp devamına element eklemeye devam edebilirsiniz. |
| lorem | Rastgele lorem ipsum metni oluşturur. |
Kısa yazımdan sonra Tab tuşuna bastığımızda Web Essential eklentisi sayesinde otomatik html kodumuz oluşuyor aşağıda bazı örnekler ile daha iyi anlayacağınıza inanıyorum.
# – ID Özelliği Kullanımı
1 2 3 4 | <!-- Kısa yazım --> #main <!-- Oluşturulan html --> <div id="main"></div> |
Not: Eğer div html element’i oluşturacaksanız div#main yerine #main yazabilirsiniz ama div haricinde farklı bir html elementi oluşturmasını istiyorsanız o zaman element#id şeklinde yazmanız gerekmektedir.
. – Class Özelliği
. karakteri ile oluşturmak istediğiniz elemente class özelliği eklenmiş olur ve girmiş olduğunuz değer atamasıda class özelliğine atanmış olur.
1 2 3 4 | <!-- Kısa yazım --> .main <!-- Oluşturulan html --> <div class="main"></div> |
Not: Eğer div html element’i oluşturacaksanız div.main yerine .main yazabilirsiniz ama div haricinde farklı bir html elementi oluşturmasını istiyorsanız o zaman element.classadı şeklinde yazmanız gerekmektedir.
[ ] – Elemente özellik ekleme
Div element’ine title adında bir özellik ekleyip bu özelliğin değerinide murat öner diye veriyoruz.
1 2 3 4 | <!-- Kısa yazım --> div[title="murat öner"] <!-- Oluşturulan html --> <div title="murat öner"></div> |
> – Alt Elementler Ekleme
Div içine div ekliyor ve içe eklenen div etiketine title attribute’ü veriyoruz.
1 2 3 4 5 6 | <!-- Kısa yazım --> div.main>div[title="murat öner"] <!-- Oluşturulan html --> <div class="main"> <div title="murat öner"></div> </div> |
{ } – Elemente Metin Ekler
Üstteki koda ek olarak div içine span ekleniyor ve span etiketi içerisine Örnek yazı ile başlayan çift haneli sayılan değer ile beraber metin ekleniyor. $$ simgesiyle 2 haneli sayısal artış sağlanıyor, $ işareti sayısı ne kadar fazla olursa sayısal hane sayısı o sayıda olacak örnek $$$$(dört dolar işareti) olsaydı o zaman ilk span etiketi metni olarak Örnek yazı 0001 olarak üretilmiş olacaktı.
1 2 3 4 5 6 7 8 | <!-- Kısa yazım --> div.main>div[title="murat öner"]>span{Örnek yazı $$} <!-- Oluşturulan html --> <div class="main"> <div title="murat öner"> <span>Örnek yazı 01</span> </div> </div> |
+ – Elementin yanına element ekler
> karakteri ile element altına element eklediğimiz gibi + karakterini kullandığımızda elementlerin child ve parent durumu olmadan yan yana üretildiklerini altta görebilirsiniz.
1 2 3 4 5 | <!-- Kısa yazım --> div{ilk element}+p{ikinci element} <!-- Oluşturulan html --> <div>ilk element</div> <p>ikinci element</p> |
* – Elementin kaç defa üretileceğini belirtir
Span etiketini * işareti ve 5 değeri ile 5 defa üretiyoruz.
1 2 3 4 5 6 7 8 9 10 11 12 | <!-- Kısa yazım --> div.main>div[title="murat öner"]>span{Örnek yazı}*5 <!-- Oluşturulan html --> <div class="main"> <div title="murat öner"> <span>Örnek yazı</span> <span>Örnek yazı</span> <span>Örnek yazı</span> <span>Örnek yazı</span> <span>Örnek yazı</span> </div> </div> |
$ – Otomatik sayısal artışlı değer bastırma
$ işareti ile sayısal olarak otomatik artan değer üretimi sağlayabilirsiniz eğer $ işareti ne kadar fazla olursa sayısal değer üretilirken basamak sayısı ona göre üretilecektir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!-- Kısa yazım --> div.main>div[title="murat öner"]>span{Örnek yazı $$$}*2>div{Örnek div $}*2 <!-- Oluşturulan html --> <div class="main"> <div title="murat öner"> <span>Örnek yazı 001 <div> Örnek div 1 </div> <div> Örnek div 1 </div> </span> <span>Örnek yazı 002 <div> Örnek div 2 </div> <div> Örnek div 2 </div> </span> </div> </div> |
Eğer dolar işareti yanına @- konulursa o zaman sayı üretimi büyükten küçüğe doğru yapılır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!-- Kısa yazım --> div.main>div[title="murat öner"]>span{Örnek yazı $$$@-}*2>div{Örnek div $@-}*2 <!-- Oluşturulan html --> <div class="main"> <div title="murat öner"> <span>Örnek yazı 001 <div> Örnek div 1 </div> <div> Örnek div 1 </div> </span> <span>Örnek yazı 002 <div> Örnek div 2 </div> <div> Örnek div 2 </div> </span> </div> </div> |
lorem – Rastgele lorem ipsum metni oluşturur.
1 2 3 4 | <!-- Kısa yazım --> lorem <!-- Oluşturulan html --> 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. |
5 Kelimelik lorem ipsum. 3 defa tekrarlattık
1 2 3 4 5 6 7 8 | <!-- Kısa yazım --> div>lorem5*3 <!-- Oluşturulan html --> <div> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </div> |
^ – Parent’a çıkıp devamına element eklemeye devam edebilirsiniz.
^ karakteri ile bir üst parent’a geçip element ekleme işine ilgili konumdan devam edebilirsiniz kaç karakter eklerseniz o kadar üst parent’a geçiş yapmış olursunuz.
1 2 3 4 5 6 7 8 9 10 | <!-- Kısa yazım --> div+div>p>span+em^bq <!-- Oluşturulan Html --> <div></div> <div> <p><span></span><em></em></p> <blockquote></blockquote> </div> |
Gördüğünüz gibi sondaki ^bq tanımı ile em elementinin parent‘i olan p elementi devamına bq(blockquote) elementi eklenmiş oluyor.
1 2 3 4 5 6 7 8 9 10 | <!-- Kısa yazım --> div+div>p>span+em^^bq <!-- Oluşturulan Html --> <div></div> <div> <p><span></span><em></em></p> </div> <blockquote></blockquote> |
^ karakterinin sayısını iki yaptığımızda bu defada p elementinin bir üst parent‘inden devam etti element eklemeye.
Görüldüğü gibi Visual Studio Emment ile birçok işlemi hızlı ve kolayca yapabilmekyeyiz. Makalenin başında belirtmiş olduğumuz gibi eğer Visual Studio Emmet kullanımını aktif hale getirmek isterseniz Web Essential adlı eklentiyi kurmalısınız. Emmet kısayollarını yazdıktan sonra klavyeden TAB tuşuna basarak örneklerimizdeki gibi otomatik html türetebilirsiniz.
merhaba, benim biraz yardima ihtiyacim var. bana kodlama ile ilgili yardim edebilir misiniz?
Tabi, nasıl bir yardıma ihtiyacınız var?
Tek kelime ile MÜTHİŞSİN – Gerçekten de yürekten tebrikler.
Tebrik ederim, kounun hakkını vermişsiniz, çok güzel bir yazı olmuş.