Redux dengan Snippet (1) — Tips Membuat Snippet VSCode Part 2a

Redux adalah salah satu library JavaScript populer. Di ReactJS pun, Redux juga tidak jarang digunakan. Meskipun populer, bukan berarti penggunaan Redux nir-komplain. Salah satu keluhan terlazim dari para calon pengguna maupun pengguna Redux sendiri adalah banyaknya sintaks yang perlu dituliskan untuk membuat aplikasi menggunakan Redux.

Demi mengurangi keluhan akibat banyaknya sintaks yang harus dituliskan untuk membuat Redux, Jonathan Keam membuat Reduxsauce, sebuah library untuk memperingkas penulisan Redux. Menurut penulis, Reduxsauce memang mengurangi keribetan dalam menulis Redux. Namun, tetap saja ribet. Ya, meskipun tidak seribet Redux default.

Untuk lebih mengurangi keribetan Reduxsauce, developer bisa membuat dan menggunakan snippet Reduxsauce sendiri.

Membuat Redux dengan Snippet

Note: Penulis membuat snippet berdasarkan kebiasaan penulis dalam ngoding. Kebutuhan sintaks snippet teman-teman mungkin berbeda.

Untuk membuat Redux dengan snippet, penulis membuat beberapa snippet, antara lain snippet Reduxsauce, Redux-saga, store, RootSaga, dan RootReducer. Selain menggunakan snippet buatan sendiri, penulis juga menggunakan beberapa snippet yang telah disediakan ES7 React/Redux/ GraphQL/React-Native snippets.

Membuat Snippet Reduxsauce

Berikut adalah contoh kode Reduxsauce yang dibuat penulis:

Dalam contoh di atas, penulis sedang membuat sebuah web portal berita menggunakan News API. File tersebut adalah koding redux untuk type, action, dan reducer headline news. Untuk membaca lebih lengkap kodenya, teman-teman bisa clone repo ini.

Untuk membuat snippet Reduxsauce, proses awalnya mirip seperti di artikel sebelumnya, yakni dengan membuka jendela snippet (File (Code untuk Mac)> Preferences > User Snippets). Kemudian pilih bahasa, dan tulis nama snippet, prefix, serta body snippet.

Penulis menamai snippetnya reduxsauce, dan memilih prefix rdxs.

Kemudian, isi body snippet dengan kodingan kita. Kita bisa menulis dari awal, atau copy-paste dari kodingan yang sudah ada. Di sini penulis copy-paste dari kodingan penulis yang sebelumnya sudah jadi.

Setelah copy-paste, akan muncul banyak peringatan. Hal ini terjadi karena body snippet hanya bisa diisi array of string. Agar snippetnya berjalan sesuai keinginan, penulis menambahkan tanda kutip di setiap line, lalu menambahkan koma di akhirnya. Apabila ada tanda kutip untuk string (misal seperti di line 230,“reduxsauce” ), maka penulis akan mengganti kutip dua dengan kutip satu. Kita juga bisa menggunakan backslash (\) sebagai escape character sebelum tanda kutip. Selanjutnya, penulis juga akan menambahkan \t untuk setiap tab.

Jadinya seperti kode di bawah:

Langkah selanjutnya adalah mengubah beberapa variabel yang seharusnya fleksibel. Di file HeadlineRedux.js, kita ingin snippet nya menghasilkan variabel headlineSuccess, di file SearchRedux.js menghasilkan searchSuccess, di file SportRedux menghasilkan sportSuccess, dan seterusnya.

Untuk menerapkannya, kita bisa menggunakan sintaks TM_FILENAME_BASE untuk menambahkan nama file di snippet kita. Dengan demikian, variabel yang ada di HeadlineRedux.js akan berbeda dengan yang ada di SearchRedux.js.

Sekarang, di file HeadlineRedux.js, kita akan membuat variabel “headlineSuccess”. Untuk melakukannya, pertama kita perlu membuat:

${TM_FILENAME_BASE}Success

Jika menggunakan penulisan seperti di atas, maka hasilnya adalah HeadlineReduxSuccess , karena nama file kita adalah “HeadlineRedux.js”. Akan tetapi, hasil yang kita inginkan adalah headlineSuccess . Kita perlu menghilangkan kata “Redux” dalam variabel tersebut. Untuk menghilangkannya, kita bisa menggunakan Regex. Sintaks untuk menambahkan Regex di snippet VSCode adalah:

'/' regex '/' (format | text)+ '/' options

Dan sintaks untuk menghapus kata “Redux” dari variabel nama file kita di snippet VSCode adalah:

${TM_FILENAME_BASE/(Redux)//g}Success

Dalam kode di atas, setelah slash (“/”) pertama adalah Regex untuk mencari kata “Redux” dalam TM_FILENAME_BASE, yang mana nama file nya adalah “HeadlineRedux”. Kemudian karena di slash kedua kosong/tidak ada operasi formatting text yang dilakukan, maka kata “Redux” akan dihilangkan.

Setelah slash ketiga ada “g” yang dalam regex bermakna mencari karakter secara global. Jika dalam nama file ada 2 atau lebih kata Redux, maka semua kata Redux akan terhapus. Namun, apabila tanpa “g”, maka hanya kata Redux yang paling awal yang akan terhapus.

Dengan menuliskan sintaks di atas, maka jika snippetnya ditulis di HeadlineRedux.js, nama variabelnya akan menjadi HeadlineSuccess . Jika variabelnya ada di SearchRedux.js, maka namanya akan menjadi SearchSuccess .

Akan tetapi, masih ada satu hal lagi yang kurang, yakni penulisan hurufnya harusnya menggunakan sistem camelCase, bukan PascalCase. Sayangnya, tidak ada sintaks bawaan snippet VSCode untuk camelCase. Untuk mengatasinya, kita bisa menggunakan keyboard shortcut dan ekstensi change-case oleh wmaurer.

Untuk meng-install ekstensinya, tekan tombol Ctrl + P untuk Windows dan Linux, serta Cmd + P untuk MacOS. Kemudian, di kotak pencarian yang muncul, ketikkan:

ext install wmaurer.change-case

Setelah berhasil meng-install, klik File > Preferences > Keyboard Shortcuts (Code > Preferences > Keyboard Shortcuts, untuk Mac). Kemudian akan muncul jendela daftar keyboard shortcut seperti di bawah:

Kemudian ketikkan camel, maka akan muncul pilihan “Change case camel”.

Selanjutnya, arahkan kursor Anda ke sebelah kiri “Change case camel”, hingga muncul tombol +. Klik tombol +, maka akan muncul dialog untuk menambahkan shortcut keyboard untuk mengubah teks menjadi camelCase.

Dalam contoh di atas, penulis menggunakan MacOS, dan mengetik ctrl+c, lalu tekan enter. Teman-teman bisa memilih keyboard shortcut yang lain. Misal, pengguna Windows bisa memilih ctrl + shift + 3.

Setelah selesai menambahkan keyboard shortcut untuk camelCase, kita kembali menulis snippet. Langkah selanjutnya adalah meletakkan kursor di posisi di mana kita ingin mengubah PascalCase menjadi format camelCase. Kita bisa melakukan hal itu dengan menggunakan fitur placeholder di snippet.

Untuk membuat placeholder di kode tadi, tambahkan ${1:} di kode tadi, seperti berikut:

${1:${TM_FILENAME_BASE/(Redux)//g}}Success

Angka 1 maksudnya adalah dia merupakan placeholder pertama dari snippet kita. Kursor akan langsung berhenti di placeholder pertama setelah kita menulis prefix dan menekan enter.

Selain menerapkan variabel TM_FILENAME_BASE untuk headlineSuccess , kita juga harus menerapkannya untuk headlineRequest, headlineFailed, dan headlineTypes , agar variabel-variabel tersebut juga berubah namanya sesuai nama file. Kita juga harus menerapkan placeholder ke ketiga variabel tersebut. Untuk urutannya, kita pakai 1 saja, agar nantinya keempat placeholder tersebut bisa diblok dan diganti menjadi camelCase bersamaan. Di bawah ini adalah contoh ketika kita sudah selesai menerapkan variabel dan placeholder untuk 4 variabel kita.

Berikut adalah hasil penggunaan snippet dari kode snippet di atas

Dalam GIF tersebut, setelah penulis mengetikkan rdxs, penulis menekan tombol enter. Lalu, kursor akan berhenti di line 4, 5, 6, dan 10. Kemudian, untuk mengubah keempat variabel yang masih PascalCase ke camelCase, penulis langsung menekan tombol kombinasi ctrl + c, yang telah penulis konfigurasi di langkah sebelumnya.

Tutorial kali ini sampai di sini. Tutorial untuk finishing snippet Reduxsauce dan membuat beberapa snippet Redux yang lain akan dibahas di Part 2b.