Emmet, sebelumnya bernama Zen Coding, adalah sebuah plugin yang sangat powerful dalam meningkatkan produktifitas kita membuat sebuah website.
Emmet mendukung banyak sekali IDE dan text editor, antara lain: Sublime Text, TextMate, Eclipse, Aptana, Notepad++, Brackets, PHPStorm dan masih banyak lagi. Emmet juga mendukung online editor seperti CodePen, JSFiddle, JSBin, IceCoder dan Codio. Saat ini Emmet hanya bisa digunakan untuk HTML dan CSS.
Catatan: Karena banyaknya fungsi yang ada di dalam Emmet, pada artikel ini kita hanya akan fokus pada HTML dan di artikel selanjutnya akan dilanjutkan dengan CSS.
Menulis HTML dengan Emmet
Untuk dapat menggunakan Emmet, setelah menulis syntax yang sesuai, cukup tekan tab pada keyboard and the magic happen. Berikut ini adalah beberapa simbol utama untuk menggunakan Emmet:
Untuk lebih jelasnya, silahkan baca ulasan dibawah ini tentang cara menggunakannya.
Child Element (Nesting)
Syntax yang digunakan untuk nesting adalah >.
Sibling Element
Untuk melakukan sibling, cukup menambahkan symbol +.
Grouping
Grouping sangat mudah dilakukan, cukup dengan menuliskan symbol ().
Menambahkan Teks
Untuk menambahkan teks, Anda bisa menggunakan symbol kurung kurawal {}.
Menambahkan Atribut
Jika Anda ingin membuat beberapa elemen berikut dengan atributnya, gunakan symbol [] dan masukan atribut di dalamnya.
Memberikan ID dan CLASS
Seperti symbolnya dalam CSS, penambahan atribut khusus ini ditulis dengan tanda pagar # untuk id dan tanda titik . untuk class.
Jika ingin memebuat div yang memiliki id atau class, Anda bisa melewatkan dalam menulisnya. Jadi cukup tanda class dan id nya saja yang ditulis. Anda juga bisa menambahkan beberapa class atau id.
Perkalian
Untuk menulis banyak elemen sekaligus, anda cukup mengalikannya dengan jumlah yang Anda inginkan. Syntax yang dipakai adalah tanda bintang *.
Naik Satu Element
Jika Anda berada dalam sebuah child element dan ingin elemen lain berada diluarnya, Anda bisa naik satu elemen dengan syntx ^.
Penomeran Otomatis
Satu lagi yang sangat menarik dari Emmet, tool mampu memberikan penomeran otomatis dengan menggunakan syntax dollar $.
Kesimpulan
Bagaimana menurut Anda? Jika Anda adalah seorang Web Developer dan belum menginstall plugin yang satu ini, saya sarankan Anda segera menginstallnya sekarang juga. Diatas, hanya beberapa tips yang dapat saya berikan, untuk tutorial yang lebih lengkap, silahkan Anda baca dokumentasi resmi Emmet disini.