Latihan Membuat Tema untuk VS Code/Codium
Tema Mayukai adalah tema yang dibuat oleh penulis untuk teks editor Visual Studio Code atau VS Codium. Tema ini dibuat dengan basis warna dasar dari Ayu Theme dengan beberapa warna campuran dari Material Theme, Monokai, dan Andromeda Theme. Susunan warna di dalam tema Mayukai telah disesuaikan lebih lanjut agar tulisan sintaks kode tetap mudah dibaca dan nyaman dipakai untuk pemrograman dalam waktu lama. Dengan demikian jangan heran jika tema ini memiliki kemiripan dari tema-tema yang disebutkan tersebut. Nama Mayukai sendiri adalah singkatan dari Material Andromeda Ayu Gruvbox Monokai , yang menandakan tema ini adalah tema yang terinspirasi dari tema tersebut.
Tema ini dapat diunduh langsung di Marketplace di text editor VS Code/Codium dengan menggunakan kata pencarian Mayukai Theme, atau ikuti petunjuk instalasi menggunakan tautan link berikut.
Tema Mayukai dibuat sebagai media belajar bagi penulis karena dilatar belakangi rasa ingin tahu untuk membuat tampilan tema seperti yang telah ada di VS Code Marketplace. Selain itu penulis ingin membuat tema yang sesuai dengan kebutuhan dan sesuai dengan seleranya untuk pewarnaan kode. Penulis lalu mencari referensi di beberapa artikel internet dan blog tentang cara melakukan kustomisasi tema dan pembuatan tema. Beberapa diantaranya ada yang menyarankan menggunakan template yang sudah disediakan untuk mempermudah pembuatannya. Bisa dengan menggunakan generator tema ataupun melakukan fork Github dari tema yang sudah ada. Beberapa tools yang dipakai untuk pembuatan tema seperti Mayukai ini dibahas di bagian berikutnya dalam artikel ini.
Tampilan tema Mayukai telah dicocokkan berdasarkan sintaks pemrograman JavaScript, TypeScript, HTML, CSS, dan Dart. Tampilan tema ini juga cocok dipakai pada bahasa pemrograman yang lain, karena warna dasarnya sudah disetel berdasarkan susunan dari Ayu Theme. Jika ditemui ada pewarnaan yang belum cocok atau tidak sesuai ketika dipakai untuk membuka sintaks pemrograman yang lain, pengguna bisa mengajukan pertanyaan dan pelaporan Issue di Github Mayukai Theme ini.
Mayukai Theme ini bersifat open source dengan lisensi MIT, jadi pengembang yang lain dipersilahkan jika ingin menggunakan basis warna tema ini untuk pembuatan tema yang lain.
Latihan Pembuatan Tema dan Tools Pendukung
Pada tahapan ini akan diberikan sekilas langkah dalam pembuatan tema untuk VS Code/Codium, yang dapat membantu pengembang dapat membuat tema sendiri sesuai keinginannya. Pengembang tema juga tidak diharuskan memakai tools di bawah ini jika pengembang tersebut sudah memiliki referensi tools yang lebih baik.
Pada artikel ini, tools atau alat yang dipakai untuk membuat tema yaitu VS Code Extension Generator dan Ayu Theme Generator. VS Code Extension Generator ini adalah generator yang dibuat oleh tim VS Code dengan bantuan Yeoman Scaffolding Tool. Tools Yeoman ini bisa dipasang dengan mudah dengan menggunakan NPM dari Node JS, kemudian dijalankan dengan menggunakan CLI di Terminal. Referensi mengenai tools ini dapat dilihat disini.
Tools berikutnya yang dipakai adalah Ayu Theme Generator. Kenapa penulis menggunakan basis Ayu Theme ? Karena penulis cukup senang dengan basis pewarnaan dan template warna yang telah disediakan. Kemudian warna latar belakang gelap yang dipakai di Ayu Theme ini sudah cukup nyaman dimata. Susunan template tema dari Ayu Theme ini mudah dipahami dan mudah dikustomisasi, sehingga memudahkan bagi para pengembang dalam pembuatan template tema di VS Code.
Tools generator dan tema warna yang disediakan oleh Ayu ini bisa dilihat pada repositori berikut ini. Pemasangan dan penggunaannya sudah tersedia lengkap di repositori Github mereka.
Pembuatan Template Warna Dasar
Langkah pertama pembuatan tema untuk VS Code ini adalah membuat warna tema dasar dari Ayu Theme Generator. Jalankan perintah npm run build untuk membuat basis warna tema dasar dalam bentuk file JSON.
Kemudian ambil file JSON yang akan dipakai sebagai tema dasar. Karena pada contoh ini adalah menggunakan tema berbasis gelap, maka yang diambil adalah tema dasar “ayu-mirage-bordered.json” atau “ayu-dark-bordered.json” . Sementara simpan dahulu tema dasar ini di tempat lain. Karena langkah berikutnya adalah membuat template warna dengan VS Code Extension Generator.
Pastikan tools VS Code Extension Generator telah terpasang sebelumnya. Kemudian buka aplikasi Terminal di komputer, kemudian lanjutkan dengan mengetikkan perintah “yo code” . Sebuah tampilan aplikasi CLI Interaktif untuk pembuatan tema akan muncul, seperti tampilan di bawah ini.
Pilih pilihan New Color Theme , dan pilih Start Fresh, karena proses pembuatan tema akan dimulai dari awal. Jika pengembang memiliki pilihan tema lain yang dibuat dengan generator TextMate atau tmTheme, bisa memilih pilihan kedua dan ketiga. Setelah pilihan Start Fresh dipilih, kemudian akan muncul pilihan yang berisi isian nama tema, keterangan tema, dan basis tema warna gelap atau terang. Pengembang dapat mengisi isian ini sesuai kebutuhan. Tampilannya CLI tersebut dapat dilihat di bawah ini.
Setelah pembuatan kerangka tema selesai dengan generator Yeoman ini, maka akan didapati sebuah folder project tema dengan sub folder bernama “themes” di dalamnya. Silahkan gunakan text editor VS Code/Codium untuk membuka folder project tema ini.
Di dalam subfolder themes ini, terdapat file berformat JSON yang didalamnya terdapat konfigurasi untuk pewarnaan sintaks kode dan konfigurasi tampilan dari VS Code itu sendiri. Misalnya pewarnaan sintaks untuk nama variabel, pewarnaan nama fungsi, pewarnaan teks komentar, dan masih banyak lagi.
Salin Template Warna Dasar
Template warna dasar yang dibuat oleh Ayu Generator dapat dipakai untuk menjadi basis warna dari tema yang akan dibuat. Salin isi dari template warna JSON “ayu-mirage-bordered.json” atau sebagian isi warna dasarnya ke dalam isi file JSON yang ada di folder /themes dari project tema yang telah dibuka dalam text editor. Kemudian lakukan penyesuaian lebih lanjut dengan memberikan warna-warna yang diinginkan ke dalam tema. Pastikan warna yang ditambahkan ke dalam konfigurasi sesuai dengan aspek sintaks pemrograman yaitu mudah dibaca, berwarna cerah, dan tidak terlalu ramai dengan warna yang sama. Pengembang tema dapat juga mencari inspirasi warna dari penyedia susunan warna (color swatch) yang banyak tersedia online di internet. Format warna yang dipakai adalah format baku hexadesimal.
Jalankan Debugging Mode
Untuk melihat tampilan tema yang telah dibuat, pengembang dapat menjalankan mode Debugging dengan menekan tombol F5 . Setelah tombol F5 ditekan, akan muncul jendela baru VS Code/Codium yang bernama “Extension Development Host” . Di dalam jendela VS Code debugging ini, dapat dilihat tampilan preview dari tema yang sedang dibuat. Silahkan buka project atau file yang berisi kode program di dalam jendela debugging ini. Hal ini bertujuan untuk mengetahui hasil pewarnaan kode dari konfigurasi yang berjalan. Contoh tampilannya dapat dilihat di bawah ini.
Jika pengembang sudah menyalin isi template warna dasar dari Ayu Theme, maka tampilan tema awal tersebut dapat berubah. Konfigurasi warna dasar dari Ayu Theme yang telah ditambahkan dan berhasil dijalankan pada mode debugging akan tampak seperti di bawah ini.
Langkah selanjutnya adalah kreativitas pengembang tema dalam melakukan konfigurasi warna tampilan tersebut. Dokumentasi konfigurasi warna ini telah disediakan lengkap di dokumentasi VS Code berikut ini.
Kustomisasi Element Sintaks dengan TM Scope
Selain konfigurasi tampilan warna dan sintaks VS Code/Codium secara umum, terdapat juga konfigurasi sintaks secara spesifik atau khusus. Misalnya pengembang ingin melakukan konfigurasi sintaks “function” dengan warna berbeda. Untuk melakukan hal tersebut, Developer Tools di VS Code/Codium telah menyediakan perintah inspeksi bernama “Inspect TM (TextMate) Scopes”. Perintah ini dapat diakses dengan menekan pintasan keyboard Ctrl + Shift + P untuk menampilkan Command Palette. Jalankan Inspect TM Scopes pada jendela debugging yang berjalan, dan lakukan inspeksi baris kode untuk menampilkan konfigurasi warnanya.
Setelah perintah tersebut dijalankan, arahkan kursor mouse tetikus di dalam file bahasa pemrograman yang sedang dibuka. Ketika kursor tersebut diarahkan dan di klik ke dalam teks sintaks, akan muncul sebuah jendela pop up yang berisi keterangan konfigurasi pewarnaan yang dipakai.
Pada contoh kali ini, akan dicontohkan penggantian warna dari warna fungsi di JavaScript. Arahkan kursor dan klik kiri mouse tetikus ke teks kode untuk “function”, maka akan muncul keterangan konfigurasi warna di bawah ini.
Jendela pop up yang berisi konfigurasi warna fungsi ini akan muncul, seperti warna yang dipakai, scope ruang lingkup warna, dan jenis bahasa pemrograman. Salin scope ruang lingkup warna yang bernama “entity.name.function.method” tersebut. Kemudian buka file JSON konfigurasi warna tema yang sedang di debugging, dan tambahkan baris konfigurasi baru untuk pewarnaan fungsi dengan scope tersebut. Berikan warna kuning untuk nama fungsi dan tambahkan scopenya, seperti tampilan di bawah ini.
Keterangan konfigurasi warna tersebut yaitu name untuk nama konfigurasi, scope untuk ruang lingkup pewarnaan sintaks, dan settings untuk konfigurasi warna teks kode. Setelah konfigurasi ditambahkan, simpan file JSON tersebut, dan jalankan kembali mode Debugging dengan tombol F5. Hasil dari perubahan konfigurasi warna dapat dilihat hasilnya di jendela VS Code Debugging tersebut. Contoh hasil tampilannya dapat dilihat di gambar ini.
Langkah selanjutnya adalah kembali kepada kreativitas dan selera dari pengembang tema untuk memberikan warna-warna konfigurasi sintaks yang disediakan. Dokumentasi lebih lanjut mengenai panduan pewarnaan sintaks kode dapat dibaca-baca pada tautan berikut ini.
Paketkan Tema dan Publikasi ke VS Code Marketplace
Langkah selanjutnya adalah mengunggah tema yang telah dibuat ke Visual Studio Code Marketplace. Pertama pastikan pengembang tema memiliki akun Outlook terlebih dahulu untuk masuk ke dashboard manajemen ekstensi VS Code. Kemudian bungkus tema yang dibuat dengan proses pemaketan ke ekstensi VSIX. Pembungkusan menggunakan aplikasi bernama VSCE yang dipasang dengan manajer NPM dari Node JS. Dokumentasi selengkapnya dapat dilihat di bawah ini.
Demikian langkah-langkah yang diperlukan dalam pembuatan tema untuk VS Code/Codium. Awalnya memang terlihat susah, namun akan menjadi mudah karena sudah terbiasa. Hal yang sulit adalah menentukan komposisi warna untuk pewarnaan sintaks, terkadang terlalu kebanyakan warna, terkadang terlalu sepi warna. Hal ini kembali lagi kepada selera dari pengembang tema tersebut dalam penentuan warna-warnanya.
Selamat mencoba dan berkarya :)
