Visual Studio Code Tutorial Emmet Extension Nedir ve Kullanımı

Merhabalar, bu yazımda VSC Extension’larından Emmet’i anlatmaya çalışacağım.

Emmet, Html ve CSS iş akışını büyük ölçüde geliştiren, biz web geliştiricilerinin sıklıkla kullandığı, kodları daha hızlı yazıp zamandan tasarruf etmek için tercih ettiğimiz bir eklentidir.

Emmet’in temel mantığı, yazılımcıya kodlama yaparken zaman kazandırmasıdır. Bu yüzden çoğu yazılımcı text editöründe Emmet eklentisini kullanır.

Emmet VS Code’a entegre şekilde default bir extension olarak gelir. Ayrıca kurulum gerektirmez.

Visual Studio Code kurulu değilse aşağıdaki linkten yararlanarak bu kurulumu yapabilirsiniz.

Windows Program Kurulumları 3 Visual Studio Code v.1.69.2

Emmet’in sayfasına giderek özelliklerini ve dokümantasyonunu inceleyebilirsiniz.

Emmet Sayfasına Git

Emmet ile yapabileceklerimize kısaca bir göz atalım.

1 Html Yapısını Oluştur

Bir Html sayfası açtığımızda Html sayfasının ana yapısı şu şekildedir.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Bu yapıyı Emmet sayesinde şu şekilde oluşturabilirsiniz.

Bir Html sayfası oluşturun ve en başa ! işareti koyup Tab tuşuna basın. Sizin için bu yapıyı hızlıca oluşturacaktır.

2 Tag Oluştur

Sayfa içinde kullanabileceğimiz pek çok Tag vardır. Bu Tag’lerin oluşturulma anında mutlaka olması gereken attribute’ları ve bir yapısı vardır. Bunun hızlı oluşturulabilmesi için yapmanız gereken tek şey Tag’in ismini yazıp Tab’a basmaktır.

a yazın ve Tab’a basınız. Aşağıdaki yapının otomatik oluştuğunu görürsünüz. Bu şekilde tüm Tag’leri oluşturabilirsiniz.

<a href=""></a>

3 İç İçe Tag’ler Oluştur

Html dosyaları iç içe yazılan Tag’ler ile oluşur. Tüm yapı içinde iç içe Tag’leri kullanabilmek için > işaretini kullanabilirsiniz.

<nav>
    <ul>
        <li></li>
    </ul>
</nav>

Bu yapıyı oluşturmak için yapmanız gereken tek şey şudur.

nav>ul>li yazıp Tab'a basmaktır.

4 Alt Alta Etiketler Oluşturmak

Etiketleri iç içe değil de birbirinden bağımsız olarak oluşturmak istersek + işaretini kullanabilirsiniz.

<div></div>
<p></p>
<blockquote></blockquote>

Yukarıdaki yapıyı oluşturmak için yapmanız gereken şudur.

div+p+bq yazıp Tab'a basınız.

5 Aynı Etiketten Birden Fazla Oluşturulması Gerekiyorsa

Aynı etiketten örneğin 20 tane üretmeniz gerekiyor bunun için yapmanız gereken etiketadı * adet olacaktır.

li*5 yazıp Tab’a basarsanız. Alt alta 5 tane li etiketi üretir.

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

6 Gruplama

Aşağıdaki yapıyı oluşturmak için yapmanız gereken şudur.

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>