How To Create Snippets In Vscode

Tips Membuat Snippet di Visual Studio Code

Salah satu prinsip penting dalam dunia software engineering adalah "Don't Repeat Yourself", alias DRY — Jangan mengulang-ulang pekerjaan; kalau bisa dipersingkat, persingkat saja. Untuk menerapkan DRY, software engineer bisa menggunakan tools yang telah disediakan oleh teks editor. Salah satu teks editor yang kaya akan tools dan gratis adalah Visual Studio Code (VSCode).

VSCode memiliki built-in snippet yang bisa mempersingkat penulisan koding. Jika built-in snippet masih belum cukup untuk Anda, ada banyak snippet extension yang siap mempersingkat pekerjaan Anda. Salah satunya, ada "ES7 React/Redux/GraphQL/React-Native snippets" yang memberi berbagai pilihan snippet untuk mempercepat penulisan koding di React dan beberapa library yang didukung. Misal, untuk menulis console.log(object), kita cukup mengetik clg, dan akan muncul opsi snippet console.log(object).

Selain untuk console.log, masih banyak lagi snippet yang lain. Misal, untuk menulis template React functional component seperti di bawah ini, Kita hanya perlu mengetik rfce, dan akan muncul beberapa suggestion dari VSCode, lalu tekan 'enter'.

membuat React function component dengan snippet ekstensi "ES7 React/Redux/GraphQL/React-Native snippets"

Dan masih banyak lagi snippet-snippet yang lain. Selengkapnya, Anda bisa mengunjungi laman ES7 React JS Snippet.

Meskipun VSCode memiliki ekstensi yang melimpah, namun tidak semua snippet disediakan oleh para pengembang ekstensi VSCode. Misalnya adalah Reduxsauce snippet. Penulis mencoba mencari snippet extension yang mendukung Reduxsauce, namun hingga penulis membuat artikel ini, penulis tak kunjung menemukannya.

Oleh karena VSCode Marketplace tidak menyediakan semua snippet yang dibutuhkan, developer bisa membuat sendiri snippet yang dibutuhkan. Dengan membuat snippet sendiri, developer juga bisa menyesuaikan snippet dengan style kodingannya. Berikut akan penulis paparkan bagaimana cara membuat custom user snippet di VSCode.

Membuat Basic Snippet

Untuk memulai membuat snippet, pertama di VSCode, buka File > Preferences > User Snippets (di MacOS Code > Preferences > User Snippets). Akan muncul jendela di bawah:

2. Pilih bahasa yang ingin kita buat snippet di dalamnya, misal JavaScript. Kita juga bisa memilih "New Global Snippets file", apabila ingin membuat snippet untuk semua jenis bahasa, tidak terbatas pada bahasa tertentu. Pada tutorial kali ini, penulis akan memilih bahasa JavaScript. Setelah memilih bahasa, akan muncul tab seperti di bawah:

Kita bisa menghapus atau membiarkan komentar tersebut, dan mulai menulis kode snippet kita di dalam file tersebut.

Menulis Snippet

Di dalam tab snippet baru, kita bisa memulai menuliskan snippet yang ingin kita buat. Format penulisan snippet seperti berikut:

Keterangan:
1. Nama Snippet: Nama snippet akan muncul saat kita menuliskan prefix di kodingan kita, di sebelah kanan dari suggestion VSCode saat kita mengetik prefix.
2. Prefix: Prefix adalah shortcut huruf yang harus kita tuliskan untuk memunculkan kodingan yang kita inginkan. Di contoh di atas, saat penulis mengetik prfx, maka akan muncul suggestion di bawah tulisan prfx.
3. Body: Body adalah kodingan yang ingin kita munculkan setelah kita menuliskan prefix. Di contoh di atas, setelah penulis mengetik "prfx", lalu menekan tombol "enter", maka akan muncul di-sini-naruh-kodingannya di tab editor penulis.

Berikut adalah ilustrasi dari penggunaan snippet di atas

Selain kedua properti di atas, snippet juga memiliki satu properti lain, yakni "description". Description nantinya akan dimunculkan di sebelah kanan dari suggestion juga. Akan tetapi, properti ini tidak wajib digunakan.

Membuat Snippet yang Lebih Panjang

Misal kita ingin membuat snippet untuk "for looping" berikut

Untuk membuat snippet for looping, kita bisa menuliskan kodingan snippet tersebut di file user snippet kita, setelah koding user snippet yang telah dibuat sebelumnya:

Berikut ilustrasi penggunaan snippet "loop":

Dalam snippet tersebut, ada beberapa sintaks baru yang belum dibahas sebelumnya, terutama di bagian body snippet.

Untuk menuliskan kode lebih dari satu baris, kita harus menggunakan array. Tiap baris diwakili oleh satu item array, dan tiap item array tipe datanya adalah string.
Tabstops. Tabstop adalah di mana kita ingin meletakkan kursor setelah snippet dimunculkan. Untuk menuliskan tabstops, kita perlu menggunakan simbol $ dan angka, misal: $1, $2, $3, dan seterusnya. Angka menunjukkan dia tabstop ke berapa. Misal $1 untuk pemberhentian pertama kursor. Kemudian ketika user menekan tombol "tab", maka kursor akan berhenti di $2. Satu urutan tabstop bisa beberapa pemberhentian.
Di contoh snippet di atas, kursor pertama kali akan berhenti di line 1 dan 2, sebelum kata array. Dan jika user menekan tombol "tab", maka kursor akan bergerak ke const di line kedua.
Placeholder. Placeholder adalah tabstop yang memiliki nilai, dan apabila kita mengetik sesuatu langsung setelah menuliskan prefix, maka value dari placeholder akan berubah. Placeholder ditulis dengan ${1: value}. Di contoh di atas, setelah menuliskan "loop" dan menekan tombol "enter", penulis mengetik namaArray, dan namaArray langsung menggantikan kata array, yang secara default dimunculkan oleh snippet.
Untuk menambahkan tab di snippet, kita perlu menggunakan \t (backslash + t). Dalam contoh di atas, tab digunakan di line kedua. Maka di awal line kedua ditambahkan \t.

Kesimpulan

Untuk membuat snippet, buka File > Preferences > User Snippets (di MacOS Code > Preferences > User Snippets.
Pilih bahasa yang ingin digunakan.
Ada beberapa hal yang harus dituliskan dalam snippet:a. nama snippetb. Prefix: singkatan untuk memunculkan snippetc. Body: koding yang ingin dimunculkan setelah mengetikkan prefix.
Beberapa sintaks snippet:
a. Array digunakan untuk menulis snippet yang berisi beberapa baris kode.
b. Tabstop ditulis dengan $ dan angka
c. Placeholder ditulis dengan ${1:tulisan}d. Tab ditulis dengan \t

Itulah cara membuat snippet yang cukup sederhana. Sintaks penulisan custom user snippet akan dibahas lebh banyak lagi di part 2.