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.

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

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>
div>(header>ul>li*2>a)+footer>p

Html ve CSS için bu şekilde bir çok kodlamamızı kolaylaştıracak Emmet kısa yolları vardır.

Bunları aşağıda paylaştığım Cheat Sheet’den bakabilirsiniz.

https://docs.emmet.io/cheatsheet-a5.pdf

Bir sonraki yazımda görüşmek üzere.


What's Your Reaction?

love
0
love
hate
0
hate
win
0
win
geeky
0
geeky
omg
0
omg
lol
0
lol
fail
0
fail
fun
0
fun
Murat Bilginer
21 Şubat 1992'de doğdum. Endüstri Mühendisi olarak lisansımı 2016 yılında tamamladım. Industryolog Akademi - NGenius oluşumlarının kurucusuyum. Şu anda kendi şirketim Brainy Tech ile Web ve Mobil Geliştirme, AWS, Google Cloud Platform Sistemleri İçin DevOps, Big Data Analiz ve Görselleştirme hizmetleri sunmakta ve Online Eğitimler vermekteyiz.