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.
- 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
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.
Grouping
Kita juga bisa menjadikan kelompok seperti pada operasi matematika (.foo>h1)+(.bar>h2) hasilnya
Penamaan Tag Implisit
Untuk menyatakan tag dengan class-nya kita tinggal mengetikkan div.item nanti keluarannya jadi
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
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
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;
Bukan cuma pixel, ukuran yang lainnya pun bisa seperti h10p+m5e jadi
height: 10%;
margin: 5em;
Berikut daftarnya
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;
}
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;
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;
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);
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.
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
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
