Lifehack Ngoding HTML CSS Pakai Emmet – Apakah kalian sering ngoding ? baik itu HTML ataupun CSS, atau kalian sedang belajar pemrograman dan sedang pada tahap HTML dan CSS. Jika iya, maka artikel ini tepat sekali untuk kalian semuanya. Mengetik beberapa kode program atau ngoding tentu akan menguras banyak waktu, agar workflow ngoding kalian lebih cepat selesai. Beberapa text editor sudah memberikan fitur-fitur yang memudahkan kita selaku programmer dalam proses ngoding, plugin yang dapat kita install sesuai kebutuhan. Salah satu plugin yang powerfull dan sudah bawaan dari vscode yaitu Emmet.
Pengertian Apa itu Emmet ?
Emmet adalah plugin yang digunakan pada text editor seperti sublime text dan visual studio code, dan fungsinya untuk mempermudah penulisan bahasa pemrograman kita, seperti php, js, html dan css dan bahasa pemrograman lainnya. Emmet menggunakan beberapa sintaks dalam membuat struktur HTML/CSS. Cara penggunaan plugin Emmet sangat mudah, hanya dengan menulis beberapa sintaks lalu kalian klik tombol tab maka akan dibuatkan strukturnya secara lengkap.
Kita akan membahas sintaks emmet yang mempermudah dalam penulisan HTML/CSS
Simbol-Simbol yang Dipakai di Emmet
Dalam proses ngoding baik itu HTML/CSS pasti membutuhkan waktu, karena adanya atribut, tag, tanda kurung kurawal, tanda kutip, titik koma dll. Setelah kita pakai emmet, kita bisa menyingkatnya hanya beberapa kata dan simbol saja, semua baris kode yang kita inginkan akan di-generate otomatis. Berikut ini simbol-simbol yang biasa dipakai di emmet :
( ) grouping
{ } menambahkan teks
[ ] menambahkan atribut
> child element
+ pasangan (sibling)
$ penomoran otomatis
* mengkalikan element
Cara Menggunakan Emmet
Cara penggunaannya baik di vscode atau di sublime sangat mudah, kalian cukup menuliskan beberapa simbol dan kata jika sudah tinggal klik TAB. Contohnya seperti ini :
Child Element (Nesting)
contoh penggunaan syntax untuk nesting adalah >
Sibling Element
untuk melakukan sibling, kalian cukup menambahkan simbol +contohnya seperti dibawah ini :
Perkalian
Suatu waktu kita memerlukan penulisan kode yang berulang, nah daripada mengetiknya lalu copy paste, kalian bisa menggunakan syntax dengan * tanda bintang.
Memberikan ID dan Class
Dalam tahap ngoding pasti kita memerlukan sebuah id dan class, kita bisa menggunakan # untuk ID dan . untuk class.
Gimana pendapat kalian dengan pluggin emmet ini ? buat kalian web developer, pasti kalian selalu menggunakan HTML, CSS, dan JS. Dalam tutorial ini hanya beberapa saja yang bisa saya perlihatkan, untuk lebih lengkapnya, kalian bisa mengunjungi web emmet untuk melihat dokumentasinya.