Cara Membuat Snippet di Visual Studio Code

5 Apr 2022 15:00 1292 Hits 0 Comments Approved by Plimbi
Snippet dan cara membuatnya.

Snippet merupakan salah sata fitur dari Visual Studio Code yang dapat mempersingkat programmer untuk menulis kode program. Seperti saat kita membuat form tentunya kita akan sering menggunakan tag berikut.

Langkah-Langkah Membuat Snippet di VSC

Pertama-tama, kita bisa ketik CTRL + SHIFT + P untuk menjalankan Command Pallet lalu ketik "Preferences: Configure User Snippets". Atau bisa juga dengan membuka File > Preferences > User Snippets.

Langkah kedua, pilih bahasa yang diinginkan. Sebagai contoh saya akan menggunakan pilihan html. Jika sudah memilih bahasa maka akan terbuka file json.

Langkah ketiga, tuliskan kode-kodenya didalam kurung kurawal.

Fomrat penulisan snippet

"nama-snippet": {

           "prefix": "prfx",

           "body": "disini-tempat-menulis-kodingannya"

}

Nama Snippet akan muncul saat kita menuliskan prefix di kodingan kita. Di sebelah kanan dari suggestion VSCode saat kita mengetik prefix.

prefix diatas adalah awalan atau nama yang diketikan untuk memanggil snippetnya. Jadi kita hanya tinggal mengetik nama prefixnya lalu tekan TAB untuk memanggil snippetnya.

body adalah tag yang akan dipanggil. Kita akan menulis tag yang kita inginkan di sini. Untuk mengetikkan beberapa baris kode maka kita bisa memasukkannya kedalam array seperti contoh diatas. Tiap baris diwakili oleh satu item array, dan tiap item array bertipe data string.

Beberapa sintaks yang berada di bagian body snippet

Tabstop adalah dimana kita ingin meletakkan kursor setelah menekan TAB. Cara menuliskannya yaitu dengan menggunakan simbol $ dan angka. Angka setelah simbol $ adalah urutan mendaratnya kursor ketika kita menekan TAB. Pertama kursor kita mendarat di $1 lalu TAB berikutnya akan mendarat di $2 dan seterusnya.

Placeholder adalah tabstop yang memiliki nilai. Contoh cara penulisannya adalah ${1:value}. Ketika kita menjalankan snippet maka value atau nilai yang kita masukkan akan diblok sehingga kita dapat mengubahnya dengan mudah jika kita ingin mengubahnya.

 

Kesimpulan

1. Untuk membuat snippet, ketik CTRL + SHIFT + P atau bisa juga dengan membuka File > Preferences > User Snippets.

2. Pilih bahasa yang ingin digunakan.

3. Ada beberapa hal yang harus dituliskan dalam snipper yaitu.

    a. Nama snippet

    b. Prefix: singkatan untuk memunculkan snippet

    c. Body: kodingan yang ingin dimunculkan setelah mengetikkan snippet.

4. Beberapa sintaks snippet

    a. Array digunakan untuk menuliskan beberapa baris kode.

    b. Tabstop dituliskan dengan $ dan angka

    c. Placeholder ditulis dengan ${1:tulisan}

Itulah cara membuat snippet yang cukup sederhana walau sebenarnya masih banyak lagi sintaks yang dapat dipakai dalam snippet.
 

Tags

About The Author

Azka Lufthansa 24
Novice

Azka Lufthansa

Azka Writer

Comments

You need to be logged in to be able to post a comment. Click here to login
Plimbi adalah tempat menulis untuk semua orang.
Yuk kirim juga tulisanmu sekarang
Submit Artikel