Buat kamu-kamu yang udah punya Sublime Text terus masih ngerasa cara koding kamu masih lama, butuh sesuatu yang baru biar kalau pasang tag tiba-tiba langsung ada ga perlu terlalu inget tinggal pencet tab doang, kalian pasti suka dengan plugin yang satu ini namanya Emmet. Dulunya bernama Zen Coding kalau kata Smashing Magazine mah

"Emmet is the most productive and time-saving text-editor plugin you will ever see." 

Keren banget kan tuh kalian bisa mempercepat kodingan dengan mengetikkan beberapa singkatan khusus trus kalo kita tekan tab maka akan keluar suatu potongan kode komplek.

Sebelum itu coba cek dulu aja nih videonya biar tambah wow.

Cara Install

Kalau kalian udah install Package Control cara installnya tinggal CTRL+SHIFT+P  → “install” → ENTER → “emmet” → ENTER. Belum tahu Package Control baca dulu artikel disini .

Bagaimana cara kerjanya?

Menulis kode HTML itu kita sadari memang memakan waktu, harus buka tutup tagnya, belum kurungnya, dan segala macam yang harus kita ketik ulang. Memang semua code editor juga punya code completion sendiri tapi keluarnya kan cuma sepotong. Kalau dengan Emmet dari sepotong itu jadi kode yang komplek jadi tidak terlalu banyak ngetik tinggal isi aja. Beberapa hal yang dapat dilakukan si Emmet ini adalah sebagai berikut.

HTML Abbreviations

Initializers

Mulai suatu dokumen HTML baru bisa secepat kilat (lebay) tinggal ketik ! atau html:5, trus tekan Tab, secara ajaib akan keluar template HTML5 doctype yang udah siap kita isi didalamnya. Keren kan, jadi kita tidak perlu lagi bikin buka tutup tag tinggal sekali potongan kode aja jadi semua.

Sumber:  http://coding.smashingmagazine.com

• html:5 atau ! untuk HTML5 doctype
• html:xt untuk XHTML trasitional doctype
• html:4s untuk HTML4 strict doctype

Menambah Class, ID, Teks dan Atribut

Syntax yang digunakan Emmet untuk mendeskripsikan suatu elemen sama seperti CSS selector, misalnya p.menu#header maka keluaranya akan menjadi

Sumber:  http://coding.smashingmagazine.com

Nesting

Bukan cuma sebatas gabungan satu tag seperti diatas namun kita juga bisa juga bersarang (nesting). Operasinya harus diawali operator > kalau mau bersarang. Bisa pakai + juga untuk satu level. Terakhir bisa pakai ^ biar nambah satu level lagi dibawahnya.

Sumber:  http://coding.smashingmagazine.com

Grouping

Kita juga bisa menjadikan kelompok seperti pada operasi matematika (.foo>h1)+(.bar>h2) hasilnya

Sumber: http://coding.smashingmagazine.com

Penamaan Tag Implisit

Untuk menyatakan tag dengan class-nya kita tinggal mengetikkan div.item nanti keluarannya jadi

Sumber: http://coding.smashingmagazine.com

Multiplikasi

Mau tambah listingnya banyak ga perlu repot tulis tag li nya, pakai operator * untuk mendefinisikan berapa banyaknya. Misalnya ul>li*3 maka keluarannya menjadi

Sumber: http://coding.smashingmagazine.com

Penomoran

Gabungan multiplikasi juga pakai nomer, cukup tambah operator $ pada nama elemen dan multiplikasi akan bekerja sesuai input yang diberikan. Jika mengetik ol>li.item$*3 maka menjadi

Sumber: http://coding.smashingmagazine.com

CSS Abbreviations

Values

Bukan hanya bisa digunakan pada tag HTML tapi bisa juga pada tag CSS. Semisal kita mau memasukan nilai width pada suatu css tinggal ketik w100 jadi deh width: 100px;

Sumber: http://coding.smashingmagazine.com

Bukan cuma pixel, ukuran yang lainnya pun bisa seperti h10p+m5e jadi

height: 10%;
margin: 5em;

Berikut daftarnya

• p → %
• e → em
• x → ex

Operator Tambahan

Ada beberapa tambahan lagi yang bisa digunakan misal kita mau membuat template @font-face dengan cepat tinggal ketik @f+ maka keluar seperti ini

@font-face {
 font-family: 'FontName';
 src: url('FileName.eot');
 src: url('FileName.eot?#iefix') format('embedded-opentype'),
   url('FileName.woff') format('woff'),
   url('FileName.ttf') format('truetype'),
   url('FileName.svg#FontName') format('svg');
 font-style: normal;
 font-weight: normal;
}

Sumber: http://coding.smashingmagazine.com

Fuzzy Search

Emmet juga bisa mencari tag yang hampir mirip dengan apa yang kita ketik misal ov:h dan ov-h dan ovh dan oh akan mengeluarkan hasil yang sama yaitu overflow: hidden;

Sumber: http://coding.smashingmagazine.com

Vendor Prefixies

Suka pakai CSS3? coba ketik trs bukan singkatan dari 'terus' yah hahaha tapi ini transition nanti keluarannya

-webkit-transition: prop time;
-moz-transition: prop time;
-ms-transition: prop time;
-o-transition: prop time;
transition: prop time;

Sumber: http://coding.smashingmagazine.com

Daftar yang lainnya

• w → -webkit-
• m → -moz-
• s → -ms-
• o → -o-

Gradient

CSS3 itu ada gradasi juga, mau buat gradasi coba ketik saja lg(left, #ff 50%, #000) keluarannya menjadi

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #ff), to(#000));
background-image: -webkit-linear-gradient(left, #ff 50%, #000);
background-image: -moz-linear-gradient(left, #ff 50%, #000);
background-image: -o-linear-gradient(left, #ff 50%, #000);
background-image: linear-gradient(left, #ff 50%, #000);

Sumber: http://coding.smashingmagazine.com

Extra

Lorem Ipsum

Memang ada plugin khusus juga untuk Lorem Ipsum ini tapi Emmet pun menyediakannya ketik lorem atau ipsum nanti langsung keluar deh itu kalimat. Lebih keren lagi coba ketik p*3>lorem3 keluarannya jadi

Lorem ipsum dolor.
Nihil, labore, laudantium.
Facilis, debitis, maiores.

Sumber: http://coding.smashingmagazine.com

Kesimpulan

Sebenarnya Emmet bukan hanya untuk Sublime Text masih banyak Aplikasi Editor yang didukung. Kemampuan si Emmet ini juga bukan cuma yang dijelaskan di atas lebih lengkap silakan cek saja websitenya dengan dokumentasi yang mantap dan cheat sheet yang bisa jadi contekan kamu untuk pake Emmet. Terakhir dari saya selamat mencoba! :D