Tutorial

Cara Menggunakan Emmet di Sublime Text 3

Penggunaan Emmet

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:

syntax 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.

membuat struktur html dengan emmet

2. Grouping

Grouping untuk membuat sebuah element yang didalamnya terdapat sebuah tag. Grouping sangat mudah untuk dilakukan, contohnya seperti dibawah ini:

grouping di emmet

3. Menambahkan Teks

Kita bisa menambahkan teks didalam tag dengan simbol kurung kurawal {}, contohnya seperti dibawah ini:

cara menambahkan teks di emmet

 

4. Menambahkan Atribut

Kita juga bisa membuat element beserta atributnya dengan menggunakan simbol [], contohnya seperti dibawah ini:

menambahkan atribut di emmet

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:

naik satu element di emmet

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:

perkalian di emmet

7. Penomoran Otomatis

Emmet mampu memberikan penomoran otomatis dengan menggunakan simbol dollar $, fitur ini cukup menarik, contohnya seperti dibawah ini:

penomoran otomatis di emmet

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:

memberikan class dan id di emmet


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.

Tags

Brian Harris

Seseorang yang tertarik dengan Dunia IT terutama di bidang Web Programming dan ingin menjadi Full-stack Developer.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
Close