PhpStrom’da Zen Coding şablonları nasıl düzenlenir?

Merhaba,

Yaklaşık bir buçuk yıldır PhpStorm kullanıyorum; oldukça başarılı bir program.

PhpStorm’un içinde de, özellikle front-end geliştiricilerin büyük ihtimalle kullandığı ya da kullanmadıysa da duyduğu yardımcı bir araç var: Zen Coding. Başka yerlerde Emmet ismiyle de duymuş olabilirsiniz ama pratikte aynı şeyi yapıyorlar.

Asıl problemden bahsetmeden önce küçük bir bilgilendirme yapmak istiyorum:

Zen Coding ya da Emmet ne işe yarıyor?

PhpStorm’da ya da Sublime gibi bir editörde bir html dokümanı açıp ya da CodePen üzerinde bir Pen oluşturup aşağıdaki satırı yazın.

.grid>.grid__item*4>.grid__content{Col $}

Ve ardından TAB tuşuna basın: aşağıdaki kodun otomatik olarak üretildiğini göreceksiniz.

<div class="grid">
    <div class="grid__item">
        <div class="grid__content">Col 1</div>
    </div>
    <div class="grid__item">
        <div class="grid__content">Col 2</div>
    </div>
    <div class="grid__item">
        <div class="grid__content">Col 3</div>
    </div>
    <div class="grid__item">
        <div class="grid__content">Col 4</div>
    </div>
</div>

Bu küçük bir örnek. Aklınızdaki satırlarca uzunluktaki bir kod bloğunu tek bir satırda ifade ederek kolayca oluşturabilirsiniz.

Asıl konumuza geçmeden önce bir konuya daha açıklık getirmek istiyorum:

Neden Zen Coding şablonlarını düzenlemeye ihtiyaç duyarız?

Kendimden örnek verecek olursam bu konuyu ilk araştırma sebebim PhpStorm’un img tagının class özniteliğini (bence) yanlış konumlandırması. img.card__logo yazıp TAB tuşuna bastığımızda şöyle bir çıktı üretiliyor:

<img src="" alt="" class="card__logo">

Ama bence şu şekilde olmalı:

<img class="card__logo" src="" alt="">

İşte bu gibi sebeplerle bu şablonları düzenlemek isteyebiliriz.

Gelelim asıl konumuza:

PhpStorm’da şablonları nasıl düzenleriz?

PhpStorm’da bulunan Zen Coding şablonlarını düzenlemek mümkün. Hatta kendi şablonlarınızı da oluşturabilirsiniz. Şimdi bahsedeceğimiz pencerenin sağ üstünde bulunan + ikonuna tıklayarak şablon setleri ve şablonlar oluşturabilirsiniz.

Mac kullanıcıları şu adımı izleyerek ilgili pencereye ulaşabilirler:

PhpStorm > Preferences > Editor > Live Templates

Burada tüm setleri görebilirsiniz. Biz Zen Coding setiyle ilgileniyoruz; çünkü klasik taglar burada tanımlanmış. Şimdi aşağıdaki yolu izleyerek img tagının ayarlarına gidelim:

Zen Coding > img

Burada aşağıdaki kodu göreceksiniz:

<img src="$VAR0$" alt="$VAR1$">

Biz bunun yerine şunu yazıp Apply diyeceğiz:

<img class="$VAR0$" src="$VAR1$" alt="$VAR2$">

Artık img.card__logo yazdığımda istediğim gibi bir çıktı üretilecek.

Fakat bu uygulamanın küçük bir potansiyel dezavantajı olabilir. Şöyle ki; sadece img yazıp TAB tuşuna basarsak, şöyle bir çıktı üretilecek:

<img class="" src="" alt="">

Yani eğer class vermek istemiyorsak class özniteliğini silmemiz gerekecek.

Aslında sadece img yazdığımızda klasik şablonu üretse daha güzel olurdu ama şimdilik çözümü ben de bilmiyorum. Eğer sizin bir fikriniz varsa, paylaşırsanız sevinirim.

Umarım bu yazı birilerine faydalı olabilir.

Sevgilerimle…