Seting Zen coding di Eclipse dan NetBeans

Di artikel sebelumnya, saya sudah membahas tentang zen coding. Sekarang bagaimana cara menseting Zencoding di editor favorit kita? Berikut ini adalah tutorial cara seting Zen coding di Eclipse /Aptana IDE dan Netbeans. Sebagai tambahan,  akan saya jelaskan seting di Notepad++ dan link untuk seting di Editor lain. Saya hanya memberikan panduan untuk editor free dan banyak pemakainya di indonesia. Catatan penting disini, sekarang zen coding berganti nama menjadi emmet. Anda bisa mengakses informasi lanjutan tentang zen-coding/emmet di http://emmet.io/.Syntax Zen coding bisa anda akses di https://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn

Panduan ini bukan hanya sebatas instalasi, namun juga termasuk testing apakah zen coding sudah aktif atau belum. Untuk itu, saya akan menggunakan kode dibawah ini untuk mengecek apakah zen coding sudah sukes di install dan bisa dipakai. berikut ini adalah kode yang anda masukan untuk testing setelah instalasi plugin.

Kode yang diketik

html:5

 

hasil dari zen coding 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	
</body>
</html>

 

Informasi lain tentang zen coding beserta ringkasan pemakaian kodenya bisa dibaca di link artikel sebelumnya atau langsung saja akses di http://docs.emmet.io/

 

Seting Zencoding di Eclipse/Aptana

  1. Buka eclipse, lalu masuk ke Help-> Install new Software…
  2. Tambahkan   link  http://emmet.io/eclipse/updates/di update site
  3. centang emmet for eclipse dan klik next lalu ikuti sisa intruksinya.
  4. Restart eclipse , lalu buat file kosong dengan nama demo.html
  5. coba ketikan html:5, blok teks tersebut,  lalu tekan [CTRL]+[E] . jika text code berubah seperti tampilan code diawal artikel maka instalasi sukses
emmeteclipse

cara install plugin zen coding di eclipse

Seting zen coding di Netbeans

  1. Buka netbeans, lalu masuk ke Tools-> plugin lalu klik tab Available plugin, cari plugin zen coding
  2. centang di plugin zen coding, lalu klik install, ikuti proses instalasinya , Lalu restart netbeans
  3. Untuk testing, buatlah file baru dengan nama demo.html
  4. ketikan html:5 , blok teks tersebut, lalu klik ikon [Z] di toolbar atau tekan [CTRL]+[ALT]+[N], jika sukses, kode akan berubah seperti kode hasil di awal artikel
Install zen coding plugin di netbeans

Install zen coding plugin di netbeans

Install Zen coding di Notepad++

Bagian ini adalah bonus artikel. Saat saya menginstall notepad++ terbaru, Menu Zencoding otomatis aktif, namun jika menu zencoding tidak tersedia atau anda memakai notepad Anda bisa menginstallnya di Plugin manager seperti langkah berikut

  1. Buka menu plugin->Plugin manager->show Plugin manager.
  2. Lihat di available tab. Pilih plugin emmet  atau Zen coding .
  3. klik install, jika emmet membutuhkan plugin lain, klik yes
  4. Restart Notepad++
  5. ketik html:5,  bloks teks tersebut lalu tekan [CTRL]+[E]
  6. jika sukses, maka teks tadi berubah menjadi seperti code hasil dibagian awal artikel. 

 

install plugin zen coding di editor lain

Untuk install di editor lain, silahkan baca di http://emmet.io/download/