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.
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.
Mau tambah listingnya banyak ga perlu repot tulis tag li nya, pakai operator * untuk mendefinisikan berapa banyaknya. Misalnya ul>li*3 maka keluarannya menjadi
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
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;
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;
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
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
Keren terimakaih infonya. :D
BalasHapussiap sama2 yah :)
Hapusmantap gan ilmunya
BalasHapus