Cara Menggunakan Emmet di Sublime Text 3
Cara Menggunakan Emmet di Sublime Text 3 – Apakah anda seorang programmer? Apakah anda sering ngoding? Jika iya, maka artikel ini tepat sekali untuk anda semuanya. Mengetik kode program atau yang biasa di sebut koding tentu akan membutuhkan waktu untuk membuat program yang kita buat akan lebih cepat selesai. Itu jugalah yang selalu dikembangkan oleh berbagai macam text editor untuk mempercepat pekerjaan para programmer. Namun ada salah satu plugin yang sangat powerfull dan bisa digunakan pada berbagai macam text editor (tidak hanya sublime) yaitu Emmet.
Emmet adalah salah satu plugin yang bisa digunakan di Sublime Text dan software text editor lainnya. Fungsi Emmet untuk mempercepat penulisan bahasa pemrograman kita, seperti Java Script, PHP, dan masih banyak lagi, bahkan HTML dan CSS pun juga bisa. Sehingga ketika kita lagi ngoding, maka akan lebih enak, mudah, cepat dan menyenangkan.
Cara Kerja Emmet
Saat kita sedang menuliskan kode HTML pasti kita akan membutuhkan waktu untuk mengetik semua tag, atribut, tanda kurung/siku, tanda kutip, dll. Tapi di emmet, kita tidak perlu menuliskan semuanya, hanya beberapa kata saja, semua tag yang kita inginkan bisa langsung tercipta dengan otomatis. Berikut ini adalah simbol-simbol utama yang ada di emmet:
Cara Menggunakan Emmet
Cara penggunaan emmet sebenernya sangatlah mudah, kita tinggal menuliskan beberapa kata lalu tinggal pencet TAB di keyboard. Untuk contoh lengkapnya, silahkan simak caranya dibawah ini:
1. Menuliskan Struktur HTML
Biasanya, ketika kita ingin menuliskan struktur HTML, kita harus menuliskan tag <html>, dll, kan? Nah pada emmet kita cukup menuliskan tanda seru “!” setelah itu pencet TAB di keyboard, maka otomatis langsung tercipta struktur HTML.
2. Grouping
Grouping untuk membuat sebuah element yang didalamnya terdapat sebuah tag. Grouping sangat mudah untuk dilakukan, contohnya seperti dibawah ini:
3. Menambahkan Teks
Kita bisa menambahkan teks didalam tag dengan simbol kurung kurawal {}, contohnya seperti dibawah ini:
4. Menambahkan Atribut
Kita juga bisa membuat element beserta atributnya dengan menggunakan simbol [], contohnya seperti dibawah ini:
5. Naik Satu Element
Jika anda berada pada sebuah child element dan anda ingin element baru berada diluarnya, maka kalian bisa gunakan simbol ^, contohnya seperti dibawah ini:
6. Perkalian
Fitur ini juga menjadi favorit saya, karena kita tidak perlu menulis atau copy paste element lagi, jika kita akan membuat banyak element, kita tinggal gunakan simbol * untuk mengkalikannya, contohnya seperti dibawah ini:
7. Penomoran Otomatis
Emmet mampu memberikan penomoran otomatis dengan menggunakan simbol dollar $, fitur ini cukup menarik, contohnya seperti dibawah ini:
8. Memberikan Class dan ID
Emmet juga bisa digunakan untuk memberikan class dan id secara cepat, sama halnya dengan CSS, untuk memberikan class kita menuliskan tanda titik . dan untuk id kita tuliskan tanda pagar #, contohnya seperti dibawah ini:
Bagaimana pendapat kalian tentang plugin yang satu ini? Jika anda adalah seorang Web Developer, saya sangat menyarankan untuk menginstall plugin ini, kenapa? Karena pasti kalian selalu ketemu dengan HTML, CSS, dan Java Script, kan? oleh karena itu saya sangat menyarankan untuk menginstall plugin ini. Dalam tutorial ini hanya beberapa saja yang bisa saya perlihatkan, untuk lebih lengkapnya, kalian bisa kunjungi web emmet untuk melihat dokumentasinya disini.