Visual Studio Code adalah alat pemrograman fundamental untuk mengedit source code aplikasi komputer. Microsoft mengembangkan tool ini untuk dapat berjalan di sistem operasi Windows, Linux, dan Mac. Aplikasi editor ini bersifat open-source, sehingga bisa kita gunakan secara gratis. Kita akan membahas tips & trik yang semua developer harus tahu saat menggunakan Visual Studio Code. Di sini kita akan membahas cara menggunakan emmet di Visual Studio Code.

Membuat templat HTML

Untuk membuat templat HTML, kita tidak perlu menuliskan tag manual satu per satu. Kita cukup menuliskan tanda seru (!) di sebuah file HTML dan VSCode akan menuliskan templat HTML (tag html, head, meta, title, body) secara otomatis. Contohnya seperti di bawah ini.

Menulis tag

Di HTML kita biasa menulis tag seperti di bawah ini.

<div></div>
<span></span>
<input type="button" value="lima">

Dengan emmet, kita tidak perlu menuliskan penutup tag dan simbolnya (seperti <, >) secara manual lagi. Cukup tulis nama tag yang ingin kita buat, lalu tekan Enter pada nama tag yang tersedia, seperti di bawah ini.

Menulis class

Untuk menambahkan class pada tag yang sedang kita tulis, cukup dengan tambahkan tanda titik (.) diikuti dengan nama class. Contohnya seperti di bawah ini.

div.container -> <div class="container"></div>
table.tabel-merah -> <table class="tabel-merah"></table>
div.baris.biru -> <div class="baris biru"></div>

Menulis id

Tidak hanya class, emmet juga memudahkan developer dalam menulis id. Caranya sama seperti class, namun id menggunakan tanda pagar (#). Contohnya seperti di bawah ini.

input:text#username.input-merah -> <input type="text" name="" id="username" class="input-merah">

Menulis tag beranak (>)

Di CSS, untuk menunjukkan anak adalah dengan simbol lebih besar (>). Dengan emmet, simbol ini kita gunakan untuk membuat tag di dalam tag, seperti pada contoh di bawah ini.

table>tbody>tr>td

Menulis tag berulang-ulang (*)

Untuk menulis tag yang berulang-ulang, kita bisa menggunakan simbol bintang (*). Contohnya seperti di bawah ini.

nav>ul>li*5

Menulis tag dengan kontennya ({…})

Jika kita ingin menambahkan isi konten ke tag, kita dapat menggunakan tanda kurung kurawal ({…}).

p{isi paragraf}

Menulis tag dengan penomoran ($)

Kita bisa memasukkan penomoran otomatis saat menulis tag berulang (*). Misalnya seperti contoh pertama, penomoran kita lakukan di konten tag li. Pada contoh kedua, penomoran kita lakukan di dua tempat, yaitu di id dan class.

ul>li{Barang ke-$}*5
ul>li#id-$.li-$*5

Agar penomoran dimulai dari angka lain, kita bisa menggunakan tanda at (@), diikuti nomor. Contohnya seperti di bawah ini.

ul>li{Barang ke-$@21}*5

Lorem

Pada saat kita membuat suatu elemen, kita perlu mencoba apakah elemen tersebut sudah benar atau belum. Lorem kita gunakan untuk menuliskan kata-kata acak yang biasa digunakan untuk mencoba CSS pada elemen. Emmet menyediakan perintah khusus untuk membuat lorem tadi. Contohnya seperti di bawah ini.

p>lorem

Itulah pembahasan kita mengenai penggunaan emmet di Visual Studio Code. Kemudahan dan kenyamanan saat mengembangkan suatu sistem sangat penting bagi developer. Semoga penjelasan di atas dapat menambah kemudahan dan kenyamanan para pembaca dalam mengembangkan sistemnya.