Cara Instal Plugin Emmet Pada Sublime Text

Kali ini kita akan membahas sebuah Plugin di sublime text yang menurut saya keren khususnya untuk pada web designer yang sering bekerja pada HTML dan CSS. Pluginnya namanya emmet teman teman bisa lihat diwebsitenya emmet.io Jadi emmet ini plugin yang banyak digunakan pada editor-editor populer terutama sublime text yang dimana meningkatkan workflow kita pada saat koding HTML CSS. Oke kita mulai saja disini saya telah mempunyai struktur HTML sebagai berikut

Jadi pada kode di atas kita punya div class container sebagai pembungkus dan didalamnya ada dua div bagian header dan bagian article. Disini saya ingin menunjukkan bagaimana cara menuliskan kode diatas dengan cepat menggunakan emmet. Sebelum kita pakai emmet kita harus menginstal terlebih dahulu caranya kita ke bagian package control kita instal packagenya seperti artikel-artikel sebelumnya sebagai berikut

selanjutnya akan tampil plugin-plugin yang dapat kita instal. Cari kata emmet seperti berikut

lalu enter dan tunggu proses downloadnya bisa lama bisa tidak tergantung koneksi dari internetnya. Jika sudah selesai maka akan tampil informasi seperti ini

dan disarankan untuk merestart editornya jika sudah berhasil dalam menginstal. Kita buat struktur tadi dengan menggunakan emmet. Yang pertama kita ketik ! (tanda seru) lalu tab akan terbuat standart struktur HTML 5 sebagai berikut

dan satu yang paling keren saya akan coba ketik seperti ini dan tekan tab di keyboard

akan otomatis dibuatkan oleh satu baris diatas. Mungkin teman teman berpikir kenapa bisa seperti itu. Jadi emmet ini gunanya untuk menterjemahkan sintak yang kita tulisan tadi tulis yakni menyingkat kode HTML. Mungkin itu dulu saja pada artikel berikutnya akan bahas lebih detail menjelaskan dari masing kode-kode tersebut Terima kasih.