Emmet - Plugin serbaguna untuk Text Editormu !!!


emmet.io eichiar.blogspot.com
Logo Emmet.io

Dalam text editor, untuk membantu mempercepat pengerjaan dalam membuat kodingan atau lainnya, biasanya terdapat plugin yang bisa digunakan bersama dengan text editor. Kali ini, saya akan menjelaskan salah satu plugin yang menurut saya cukup berguna dan powerfull pastinya dalam membuat kodingan yaitu Emmet.

Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow (sumber : https://emmet.io/) .

Jadi, emmet ini merupakan plugin yang populer diberbagai text editor seperti Sublime Text (yang sering saya gunakan), lalu Atom, Netbeans, Notepad++, Eclipse/Antana dan masih banyak Text Editor yang mendukung plugin emmet ini.



Mengapa dengan emmet membantu kita dalam HTML & CSS workflow ?

Karena kita jika melakukan kodingan biasa tanpa plugin emmet, maka harus mengetikkan satu per satu apa yang mau kita buat. Misalkan saja ingin membuat tag "div" dengan class "al" kita harus mengetikkannya satu per satu. Dengan menggunakan emmet di text editor yang kita gunakan, maka hal itu tidak perlu. Tinggal mengetik "div.al" maka hasilnya "<div class="al"></div>".

eichiar.blogspot.com

eichiar.blogspot.com
Contoh Penggunaan Emmet
Untuk dapat mengguakan emmet ini di text editor kesayangan kalian, terdapat 2 cara yaitu : 
  1. Pertama dari dalam text editor sendiri mengguakan Package Control misalnya kalo Sublime Text
  2. Dapat di download langsung di https://emmet.io/download/ dan diletakkan di direktori untuk plugin text editor kalian (misal : di folder packages pada sublime text)
Oh iya, karena saya menggunakan Sublime Text maka saya hanya menjelaskan caranya jika di Sublime Text. Sebenernya kurang lebihnya sama untuk text editor yang lain tapi kali ini saya akan mencontohkannya di Sublime Text 3. 

Pertama kalian buka sublime text kalian, lalu pilih Tab menu "Tools" dan pilih "Command Pallete". 

eichiar.blogspot.com
Pilih Tools lalu Command Pallete
Kedua, saat sudah keluar box "Command Pallete", kalian ketikkan "Package Control", dan ketik install package

Package Control : Install Package
Ketiga, kalian ketikkan "Emmet" di box, lalu kalian pilih. Karena saya sudah menginstall "Emmet" maka ditempat saya tidak akan muncul lagi. Kira kira seperti dibawah ini : 

emmet eichiar.blogspot.com
Ketik Emmet di Box
Jika langkah di atas telah kalian lakukan, maka kalian telah menginstall emmet di Sublime Text kalian. Jika berhasil akan muncul teks seperti berikut : 

Emmet - Package Control Message
Emmet - Package Control Message
Itulah langkah - langkah untuk menginstall emmet di text editor kalian. Saya mencontohkannya menggunakan sublime karena ringan dan mantap untuk digunakan menurut saya ^^. Semoga kalian juga berhasil dalam menginstall plugin ini, karena sangat powerfull dan berguna menghemat waktu untuk kodingan. Jika ada pertanyaan silahkan tinggalkan di kolom komentar atau dapat bertanya di email.

Selamat Mencoba ^^

Eich-I-Ar

Post a Comment

0 Comments