Visual Studio Zen Coding İle Kısa Sürede Kodlama

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 Zen Coding

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ısayolAçı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.
loremRastgele 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ı

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.

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.


 > – Alt Elementler Ekleme

Div içine div ekliyor ve içe eklenen div etiketine title attribute’ü veriyoruz.


{ } – 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ı.


 + – 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.


* – Elementin kaç defa üretileceğini belirtir

Span etiketini * işareti ve 5 değeri ile 5 defa üretiyoruz.


$ – 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.

Eğer dolar işareti yanına @- konulursa o zaman sayı üretimi büyükten küçüğe doğru yapılır.

 


lorem – Rastgele lorem ipsum metni oluşturur.

En sevdiğim özelliklerden biri karşınızda. Her yerde karşılaştığımız klasik doldurmalık yazı lorem ipsum!

5 Kelimelik lorem ipsum. 3 defa tekrarlattık

^ – 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.

Gördüğünüz gibi sondaki ^bq tanımı ile em elementinin parent‘i olan p elementi devamına bq(blockquote) elementi eklenmiş oluyor.

^ 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.

5/5 - (3 votes)

Murat Öner sitesinden daha fazla şey keşfedin

Okumaya devam etmek ve tüm arşive erişim kazanmak için hemen abone olun.

Okumaya devam et