Pada kesempatan kali ini saya akan menjelaskan cara menggunakan emmet di sublime text. Sebelumnya perlu teman-teman ketahui, sublime text editor merupakan program yang paling popular yang banyak di gunakan oleh kebanyakan programmer hingga saat ini, karena kemudahan dalam pengoperasian program tersebut serta tersedia banyak fitur – fitur yang tidak di miliki text editor pada umumnya.
Salah satu plugin atau fitur tersebut adalah Emmet, yang dapat membantu mempermudah dalam menulis sintaks di Editor program, Emmet ini sendiri penerus dari Zen Codding. Cara kerja dari plugin tersebut adalah :
Seperti contoh ketika teman-teman menulis kode HTML pasti membutuhkan waktu untuk mengetik semua tag, atribut, tanda kutip, tanda kurung dll. Dengan menggunakan Emmet , teman-teman bisa meringkas dan menghemat waktu dalam menulis kode-kode html yang ingin di buat, karena Emmet akan membuat singkatan sederhana yang akan menjadi potongan kode yang kompleks.
Untuk menggunakan plugin tersebut, sebelumnya teman-teman menginstalnya terlebih dahulu.
Untuk menginstal nya berikut tahapan nya :
- Syarat utama adalah pastikan teman-teman terkoneksi dengan internet, kemudian teman-teman harus install Package control.
- Setelah itu, klik tombol CTRL+Shift+P, dan ketikan Install dan pilih Install Package seperti contoh gambar di bawah ini :
- Jika sudah klik tombol Enter.
- Selanjutnya ketikan lagi emmet, dan klik tombol ENTER seperti contoh gambar di bawah ini :
- Sublime Text akan melakukan download dan instalasi Emmet secara otomatis. Setelah selesai, maka plugin Emmet siap digunakan.
Berikut Contoh Penggunaannya :
- Membuat stuktur HTML 5 dengan cepat, teman-teman cukup ketikan
html:5
- lalu klik tombol tab di keyboard, maka dengan otomatis akan membuat tag html seperti berikut :
- Membuat multiple <div>, teman-teman cukup ketikan
div*5
- lalu klik tombol tab di keyboard, maka dengan otomatis akan membuat tag html seperti berikut :
- Membuat <ul>, teman-teman cukup ketikan
ul
- lalu klik tombol tab di keyboard, maka dengan otomatis akan membuat tag html seperti berikut :
- Membuat <ul><li>, teman-teman cukup ketikan
ul>li
- lalu klik tombol tab di keyboard, maka dengan otomatis akan membuat tag html seperti berikut :
- Membuat child element , teman-teman cukup ketikan
header>nav>ul>li
- lalu klik tombol tab di keyboard, maka dengan otomatis akan membuat tag html seperti berikut :
Sampai di sini penjelasan saya mengenai cara menggunakan emmet di sublime text, semoga bermanfaat.