Mempermudah Penulisan Codding Dengan Emmet Plugin

Menulis codding tentu akan sangat dibutuhkan efisiensi waktu sehingga project yang dibuat akan lebih mudah untuk dikembangkan, dan itulah yang selalu dikembangkan oleh berbagai macam text editor untuk mempermudah kerja programmer. Akan tetapi terkadang fitur yang ada dalam suatu text editor belum memberikan kepuasan para programmer dalam menulis sintaks ( karena programmer tidak akan pernah puas :V ), untuk itu terkadang dibutuhkan fitur tambahan yang belum ada di text editor , dan diantaranya adalah plugin Emmet yang membantu mempermudah dalam menulis sintaks di Editor program, Emmet ini sendiri penerus dari Zen Codding.

Cara Kerjanya

Misalnya kita menulis kode HTML pasti  membutuhkan waktu untuk mengetik semua tag, atribut, tanda kutip, tanda kurung dll. Text editor membantu kita dalam penulisan kode contoh warna kode  dll , tapi kita masih perlu banyak mengetik. Emmet akan membuat singkatan sederhana yang akan menjadi potongan kode yang kompleks.

Cara kerja Emmet Sumber gambar: http://www.smashingmagazine.com/wp-content/uploads/2013/03/initializers.gif

  • contoh kita akan membuat struktur HTML seperti dibawah ini :
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>

    </body>
    </html>
  • kita tidak perlu mengetik semua kode di atas cukup mengetik `  ! ` atau ` html:5 ` lalu tekan tombol Tab atau Ctrl + E. Gimana mudah kan????

Install Emmet

Emet mendukung  banyak teks editor  dan IDE, salah satu yang terkenal adalah notepad++ dan Sublime Text, untuk melihat teks editor yang didukung dapat  dilihat dan didownload  di sini http://www.emmet.io/download/. Tapi pada tutorial kali ini sy hanya membagikan cara install untuk Eclipse dan Sublime Text.

Install Emmet di Eclipse IDE

Emmet dapat dengan mudah diinstall di Eclipse cukup klilk menu Help > Eclipse Marketplace  pada textbox Find ketik  Emmet akan muncul hasil pencarian Emmet Plugin klik _Install _.

Install Emmet di Eclipse  plugin Emmet di Eclipse Marketplace

nb: instalasi butuh koneksi internet

Install Emmet di Sublime Text 3

Rename foldernya menjadi Emmet]

  • Buka Sublime Text klik menu _Preferences > Browse Package _akan terbuka folder tempat menyimpan plugin Sublime Text, copy folder Emmet ke folder tersebut.

  • Restart Sublime Text

  • Lihat menu _preferences > emmet > Settings Default  _jika terdapat banyak kode seperti dibawah ini berarti Emmet berhasil diInstall jika tidak berarti proses installasi gagal.

Permasalahan jika gagal install
  • Emmet membutuhkan `  PyV8 ` download PyV8 disini download sesuai versi OS nya

  • Buat folder dengan nama PyV8

  • contoh file yang didownload ` pyv8-linux64-p3.zip ` ekstract lalu masukan ke dalam folder **PyV8 **dan pindahkan kedalam folder plugin Sublime Text

  • jadi struktur foldernya kira-kira seperti ini

Isi folder Packages Sublime Text

[caption id=”” align=”aligncenter” width=”434”] Isi folder PyV8[/caption]

selengkapnya tentang emmet sublime text : https://github.com/sergeche/emmet-sublime

Beberapa fitur dari Emmet

Buat file html baru di Sublime text dan coba kode dibawah ini

Contoh

  • html:5 atau  `  ! ` for untuk HTML5 doctype

  • html:xt   untuk XHTML transitional doctype

  • html:4s untuk HTML4 strict doctype

    <!DOCTYPE html>

    Document
  •  p.bar#foo akan menghasilkan

  • h1{foo}

    foo

  • a[href=#]

  • menggunakan karakter `  * ` untuk mebuat jumlah banyaknya perulangan. contoh ` table>tr3>td2 `

<table>
             <tr>
                 <td></td>
                 <td></td>
             </tr>
             <tr>
                 <td></td>
                 <td></td>
             </tr>
             <tr>
                 <td></td>
                 <td></td>
             </tr>
</table>
  • Kita bisa menggunakan karakter `  > ` untuk tag yang didalamnya dan `  + ` untuk tag yang setara dan `  ^ ` untuk tag yang di atasnya contoh  p>span+span^p akan menghasilkan:

  • memuat group contoh ` (.a>h1)+(.b>h2) `

    <div class="b">
    <h2></h2>
    

    </div>

dan masih banyak contoh penulisan lainnya silahkan kunjungi http://docs.emmet.io/

Referensi

http://docs.emmet.io/

http://www.smashingmagazine.com/2013/03/goodbye-zen-coding-hello-emmet/

https://github.com/sergeche/emmet-sublime