Emmet, CSS seçicilerine benzeyen kısa ifadeleri (kısaltmaları) tam HTML ve CSS koduna dönüştüren bir kod editörü eklentisi / araç setidir. Örneğin ul>li*3 yazıp Tab'a basınca üç maddeli bir liste oluşur.

Emmet'i nasıl kullanırım?

VS Code, WebStorm gibi editörlerde Emmet yerleşiktir. Bir HTML dosyasında kısaltmayı yazıp Tab (veya Enter) tuşuna basmanız yeterlidir. Sublime Text, Vim gibi editörlerde eklenti olarak kurulur.

Emmet'in eski adı nedir?

Emmet'in eski adı Zen Coding'dir. 2008–2009 yıllarında ortaya çıkan proje, 2012'de Emmet adını aldı.

← Ödev Lobisi · Ödev 04

Bir Web Geliştirici Aracı · Eski adıyla Zen Coding

emmet Yazarken düşünmek, düşünürken yazmak.

ul>li*3 yaz, Tab'a bas. Bitti. Emmet, CSS seçicisine benzeyen kısacık ifadeleri tam HTML ve CSS koduna dönüştüren bir araç seti. Bu sayıda sözdizimini tek tek söküyor, sonra her şeyi sıfırdan yazdığım kendi Emmet motorumla canlı deniyoruz.

Playground'a atla → Meydan okumayı dene 📄 PDF Özeti (3 Sayfa)

index.html — demo HTML

Tab ⇥ genişlet

Kısaltma yazılıyor…

1 tuş

Genişletmek için
gereken tek şey: Tab

~%80

Örneklerde daha az
karakter (aşağıda ölçüldü)

2009

Zen Coding olarak
yaygınlaştığı yıl

0 kurulum

VS Code & WebStorm'da
yerleşik geliyor

§ 01 · Tanım

Emmet nedir?

Emmet, kod editörlerine eklenen bir kısaltma genişletme motorudur. Sen yapının tarifini yazarsın, Emmet kodunu yazar.

/ˈɛmɪt/ · isim

Emmet

CSS seçici sözdizimine benzeyen kısa ifadeleri (abbreviation) anında eksiksiz HTML, XML veya CSS koduna dönüştüren; ayrıca etiket sarmalama, eşleşen etikete gitme, sayı artırma gibi düzenleme komutları sunan açık kaynaklı araç seti.

Temel fikir

Bir web geliştiricisi CSS yazarken zaten nav ul li a gibi seçicilerle düşünür. Emmet bu tanıdık dili tersine çevirir: seçici HTML'i seçmek yerine HTML'i üretir.

CSS'te seçici — var olanı bulur

nav > ul > li.active {
  color: tomato;
}

Emmet'te kısaltma — yenisini üretir

Hız

Onlarca satırlık iskelet birkaç karakterle oluşur. Tekrarlı yapılarda (menü, tablo, kart listesi) kazanç katlanarak artar.

Hatasızlık

Kapanış etiketini unutmak, yanlış iç içe geçirmek, tırnak kaçırmak imkânsız hâle gelir — kodu insan değil motor yazar.

Odak

Parmaklar < / > ile boğuşmaz; zihin yapının kendisine, yani ne kurduğuna odaklanır.

Evrensellik

Aynı sözdizimi VS Code'da, WebStorm'da, Sublime'da, CodePen'de çalışır. Bir kez öğren, her yerde kullan.

§ 02 · Tarihçe

Zen Coding'den Emmet'e

Bir blog fikri olarak başlayan proje, bugün neredeyse her editörün içinde.

2008

Fikir: "Zen Coding"

HTML'i CSS seçicileriyle tarif etme fikri Vadim Makeev'in yazısıyla ortaya çıkar. Sergey Chikuyonok bu fikri Zen Coding adıyla çalışan bir araca dönüştürür.
2009

Dünyaya açılış

Smashing Magazine'de yayımlanan tanıtım yazısıyla Zen Coding geniş kitlelere ulaşır; TextMate, Aptana, Notepad++ gibi editörler için eklentiler çıkar.
2012

Yeni isim: Emmet

Kapsamı büyüyen proje yeniden yazılır ve Emmet adını alır. Sadece kısaltma değil; etiket sarmalama, eşleşen etikete atlama, görsel boyutu güncelleme gibi komutlar da eklenir.
2017

VS Code'a yerleşik

Microsoft, modüler hâle getirilen Emmet 2.0'ı Visual Studio Code'a varsayılan olarak entegre eder. Artık kurulum gerekmez; HTML dosyası açmak yeterli.
Bugün

Her yerde

Açık kaynak emmet npm paketi; VS Code, JetBrains IDE'leri, Sublime Text, Vim, CodePen ve daha fazlası. JSX, Vue, PHP, Pug gibi dillerde de çalışır.

§ 03 · Sözdizimi

On operatör, sonsuz yapı

Emmet'in bütün gücü bir avuç sembolde. Aşağıdaki her çıktı, bu sayfada çalışan motor tarafından canlı üretiliyor — elle yazılmadı. Kartın altındaki Dene'ye bas, playground'da oyna.

Çocuk

child

Sağdaki öğeyi soldakinin içine koyar.

nav>ul>li

Kardeş

sibling

Öğeleri aynı seviyede, yan yana dizer.

header+main+footer

Yukarı çık

climb-up

Bir seviye yukarı çıkar. ^^ iki seviye çıkar.

div>p>span^h2

Çarpma

multiplication

Öğeyi N kez tekrarlar.

ul>li*4

( )

Gruplama

grouping

Alt ağaçları paketler; ^'e gerek bırakmaz, grup da çarpılabilir.

(dt+dd)*2

ID

id attribute

Öğeye id verir. Etiket yazılmazsa div varsayılır.

#app>section#hero

Class

class attribute

Bir ya da birden çok class ekler — zincirlenebilir.

button.btn.btn-primary

[ ]

Öznitelik

custom attributes

İstediğin özniteliği yazar. Boşluklu değer için tırnak kullan.

a[href=# title="Ana sayfa"]

{ }

Metin

text content

Öğenin içine metin yazar.

h1{Merhaba Dünya}

Numaralandırma

item numbering

$ sıra no, $$ sıfır dolgulu, $@- ters, $@5 5'ten başlar.

ul>li.item$$*3

Örtük etiketler · implicit tag names

Etiket adını yazmazsan Emmet bağlama göre tahmin eder: ul içinde li, table içinde tr, tr içinde td, satır içi öğede span, diğer her yerde div.

Hazır snippet'ler · aliases

Kısaltma	Çıktı

§ 04 · Laboratuvar

Emmet Playground

Yaz, anında gör. Bu araç hiçbir harici kütüphane kullanmıyor; kısaltmayı önce ayrıştırıp bir ağaca (AST) çeviren, sonra HTML üreten ~600 satırlık kendi motorumla çalışıyor.

Kısaltma

›

Hazır örnekler:

X-Ray

§ 05 · CSS

CSS'te de aynı büyü

Emmet bir CSS dosyasında da çalışır: özellik adlarının baş harflerini ve değeri yaz, gerisini o tamamlasın. Birden fazla özelliği + ile bağla. Aşağıdaki kutu, ürettiğin CSS'i canlı uyguluyor.

CSS kısaltması

Canlı sonuç

Emmet

Kısaltma	Çıktı	Kısaltma	Çıktı

Birim kısayolları: tam sayı → px, p → %, e → em, x → ex. Sona ! eklersen !important olur. Renkte #f → #fff, #3a → #3a3a3a.

§ 06 · Gerçek kullanım

Tab'a bas, genişlesin

Gerçek editörde Emmet böyle çalışır: imlecin solundaki kısaltmayı bulur, Tab'a basınca yerine kodu koyar. Aşağıdaki editör bunu birebir simüle ediyor. Bir satıra kısaltma yaz ve Tab'a bas.

sayfa.html

Hazır — bir kısaltma yaz, Tab'a bas Ctrl+Z geri alır

Canlı önizleme

İleri seviye · Wrap with Abbreviation

Var olan metni sarmalamak

VS Code'da metni seç → Ctrl+Shift+P → Emmet: Wrap with Abbreviation. Sayı verilmemiş *, her satır için bir tekrar üretir.

Seçili satırlar Sarmalama kısaltması

§ 07 · Ölçüm

Ne kadar hızlı?

Beş gerçekçi senaryo, karakter karakter ölçüldü. Gri çubuk elle yazılması gereken HTML (girintisiz), renkli çubuk Emmet kısaltması + Tab. Değerler motor tarafından sayfa yüklenirken hesaplanıyor.

§ 08 · Meydan okuma

Kısaltmayı sen bul

Hedef HTML'i üreten Emmet kısaltmasını yaz. Birden fazla doğru cevap olabilir — motor senin kısaltmanı genişletip çıktıyı hedefle karşılaştırıyor.

1/ 8

Puan 0

Hedef çıktı ·

Senin çıktın

›

§ 09 · Ekosistem

Hangi editörde, nasıl?

Emmet'in güzelliği taşınabilirliği: bir kez öğrendiğin sözdizimi her yerde aynı.

Yerleşik

VS Code

HTML, CSS, JSX, Vue dosyalarında hazır. Öneri listesinden seç ya da Tab.

Yerleşik

WebStorm / JetBrains

PhpStorm, IntelliJ dâhil tüm JetBrains IDE'lerinde Tab ile genişletme.

Yerleşik

CodePen

HTML ve CSS panellerinde Emmet varsayılan olarak açık; tarayıcıdan dene.

Eklenti

Sublime Text

Package Control → Emmet paketi. Resmî eklenti Sergey Chikuyonok'tan.

Eklenti

Vim / Neovim

emmet-vim eklentisi; varsayılan tetik Ctrl+Y ardından ,

Eklenti

Notepad++

Eklenti yöneticisinden kurulur; Zen Coding döneminden beri desteklenir.

VS Code · settings.json

Birkaç ayarla daha güçlü

emmet.triggerExpansionOnTab — Tab ile genişletmeyi garanti eder.
emmet.includeLanguages — Emmet'i başka dillere (PHP, JS) açar.
emmet.showExpandedAbbreviation — öneri listesinde önizleme.
emmet.syntaxProfiles — çıktı biçimini (ör. self-closing />) ayarlar.

Faydalı komutlar (Ctrl+Shift+P → "Emmet")

Wrap with Abbreviation — seçimi bir kısaltmayla sarar.
Balance (outward/inward) — etiket bloğunu seçer.
Go to Matching Pair — açılış/kapanış etiketine atlar.
Update Tag · Remove Tag — etiketi değiştirir / kaldırır.
Increment/Decrement Number — imleçteki sayıyı artırır.

{
  "emmet.triggerExpansionOnTab": true,
  "emmet.showExpandedAbbreviation": "always",
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "php": "html"
  },
  "emmet.syntaxProfiles": {
    "html": { "self_closing_tag": true }
  }
}

§ 10 · Dikkat

Sık yapılan hatalar & ipuçları

✗ul > li * 3

✓ul>li*3

Boşluk yok. Emmet boşluğu kısaltmanın sonu sayar; boşluk sadece {metin} ve tırnaklı öznitelik içinde serbesttir.

✗div>p>a^^^^section

✓(div>p>a)+section

Çok fazla ^ yerine grup. Parantez, karmaşık yapıları okunabilir tutar.

✗<div class="box"> (JSX)

✓<div className="box">

JSX'te Emmet class yerine otomatik className üretir — yeter ki includeLanguages ile javascriptreact eşlemesi açık olsun.

✗img*20 elle

✓img[src=foto$$.jpg]*20

$ her yerde çalışır — class'ta, id'de, öznitelik değerinde, metinde, hatta etiket adında: h$*6.

✗p{Lorem ipsum dolor…}

✓p*3>lorem20

Yer tutucu metin için lorem (30 kelime) ya da loremN (N kelime).

✗Kısaltmayı ezberlemek

✓Seçici gibi düşünmek

Emmet bir dil değil, bir alışkanlık. CSS seçicisi biliyorsan Emmet'in %80'ini zaten biliyorsun.

Sonuç

Emmet, web geliştirmenin en sıkıcı kısmını — tekrar eden işaretleme yazmayı — birkaç karakterlik bir düşünceye indirger. Öğrenme maliyeti bir öğleden sonra, kazancı ise her gün. Ve en güzeli: CSS seçicisi bilen herkes zaten yarı yolda.

Kaynaklar

Resmî + güvenilir

docs.emmet.io

emmet Yazarken düşünmek, düşünürken yazmak.

Emmet nedir?

Emmet

Hız

Hatasızlık

Odak

Evrensellik

Zen Coding'den Emmet'e

Fikir: "Zen Coding"

Dünyaya açılış

Yeni isim: Emmet

VS Code'a yerleşik

Her yerde

On operatör, sonsuz yapı

Çocuk

Kardeş

Yukarı çık

Çarpma

Gruplama

ID

Class

Öznitelik

Metin

Numaralandırma

Emmet Playground

CSS'te de aynı büyü

Tab'a bas, genişlesin

Var olan metni sarmalamak

Ne kadar hızlı?

Kısaltmayı sen bul

Hangi editörde, nasıl?

VS Code

WebStorm / JetBrains

CodePen

Sublime Text

Vim / Neovim

Notepad++

Birkaç ayarla daha güçlü

Sık yapılan hatalar & ipuçları

Resmî + güvenilir

Emmet Dokümantasyonu

Emmet Cheat Sheet

Emmet in VS Code

emmetio/emmet

Emmet Ana Sayfası

Emmet in WebStorm