Visual Studio'da Zen Coding Kısa Yolları

16.08.2023 / Eğitim

Visual Studio kullanıcıları, kodlama yaparken zamandan kazanmak için Zen Coding diğer adıyla Emmet kısa yollarını kullanır.

Kod yazarken sürekli tekrarlanan içerikler bazen can sıkıcı olabiliyor. Bu sıkıcılıktan kurtulmak isteyenler pratik yoldan kodlama yapmanın yollarını arıyor. İşte Emmet de tam bu noktada devreye giriyor.

Visual Studio 2022 kullananlar bu kısa yolları kullanmak için şu iki adımı tamamlamaları gerekiyor:

• Araçlar – Seçenekler – Metin Düzenleyici – HTML – Gelişmiş adımlarını takip edip “ASP.Net Core için Razor düzenleyicisi kullan” seçeneğini false yapmalısınız. Ardından Visul Studio’yu kapatınız.
• “https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ZenCoding” adresinden ZenCoding eklentisini indirin ve kurun. Visual Studio programınızı çalıştırın.

Bazı Emmet kısayolları:

• #: 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
• ^: Ana dizine çı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ı

#main yazıp tab tuşuna basınca ortaya şu ifade çıkar:

<div id="main"></div>

Class Özelliği Kullanımı

.main yazıp tab tuşuna basınca ortaya şu ifade çıkar:

<div class="main"></div>

Elemente Özellik Ekleme

div[class="ortali"] yazıp tab tuşuna basınca ortaya şu ifade çıkar:

<div class =" ortali "></div>

Alt Elementler Ekleme

div.main>div[class ="ortali"] yazıp tab tuşuna basınca ortaya şu ifade çıkar:

<div class="main">

    <div class ="ortali"></div>

</div>

Elemente Metin Ekleme

div.main>div[class ="ortali"]>span{Örnek yazı $$} yazıp tab tuşuna basınca ortaya şu ifade çıkar:

<div class="main">

    <div class ="ortali">

        <span>Örnek yazı 01</span>

    </div>

</div>

Elementin Kaç Defa Üretileceğini Belirtmek

div.main>div[class ="ortali"]>span{Örnek yazı $$}*3 yazıp tab tuşuna basınca ortaya şu ifade çıkar:

<div class="main">

    <div class ="ortali">

              <span>Örnek yazı 01</span>

<span>Örnek yazı 02</span>

<span>Örnek yazı 03</span>

    </div>

</div>

Otomatik Sayısal Artışlı Değer Bastırma

div.main>div[class="ortali"]>span{Örnek yazı $$$}*2>div{Örnek div $}*2 yazıp tab tuşuna basınca ortaya şu ifade çıkar:

<div class="main">

    <div class="ortali">

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

Otomatik Lorem İpsume İçerik Oluşturma

div>lorem5*3 yazıp tab tuşuna basınca ortaya şu ifade çıkar:

<div>

    Lorem ipsum dolor sit amet.

    Lorem ipsum dolor sit amet.

    Lorem ipsum dolor sit amet.

</div>

Ana Dizine Çıkıp Devamına Element Ekleme

div+div>p>span+em^bq yazıp tab tuşuna basınca ortaya şu ifade çıkar:

<div></div>

<div>

    <p><span></span><em></em></p>

    <blockquote></blockquote>

</div>