Perkenalan Mayukai Theme Pack untuk VS Code, VS Codium, Eclipse Theia dan Code OSS
Text Editor yang bernama Visual Studio Code sudah tidak asing lagi bagi para pengembang aplikasi saat ini. Visual Studio Code (VS Code) adalah sebuah text editor yang dibuat oleh Microsoft untuk sistem operasi multiplatform, artinya tersedia juga untuk versi Linux, Mac, dan Windows. Teks editor ini secara langsung mendukung bahasa pemrograman JavaScript, Typescript, dan Node.js, serta bahasa pemrograman lainnya dengan bantuan plugin yang dapat dipasang via marketplace Visual Studio Code (seperti C++, C#, Python, Go, Java, dst). Text editor ini bersifat open source di beberapa bagiannya, sehingga banyak pengembang yang ikut serta berkontribusi mengembangkan text editor tersebut. Salah satu contohnya adalah pengembang yang berkontribusi dengan membuat teks editor “fork” dari VS Code dengan fungsionalitas tertentu. Tercatat sudah ada beberapa text editor hasil fork dari VS Code ini, seperti VS Codium, Code OSS, Stackblitz, dan yang terbaru adalah Eclipse Theia. Text editor hasil fork ini bersifat open source, dan mereka tidak menggunakan beberapa binary closed source dari Microsoft, seperti binary Telemetry, logo produk, binary dependency untuk dukungan koneksi ke Azure / Live Share, dan binary lainnya.
VS Code menyediakan API yang dapat dipakai untuk membuat plugin atau ekstensi pendukung fungsionalitas VS Code. API ini dapat dipakai bebas oleh pengembang untuk membuat ekstensi yang beraneka ragam jenis dan fungsinya. Seperti ekstensi untuk Linting, Snippets, Icon dan Theming, Git VCS, dukungan bahasa pemrograman, manajemen projek, dan lain-lain. Ekstensi yang telah dibuat pengembang lalu dapat didistribusikan melalui Marketplace yang disediakan oleh Microsoft yang bernama Visual Studio Marketplace. Salah satu ekstensi yang dibahas di dalam artikel ini adalah ekstensi untuk pemberian warna tema pada VS Code, yang meliputi tema teks editor, tema menu, dan tema pewarnaan sintaks. Ekstensi tersebut adalah Mayukai Theme Extension. Di dalam artikel ini, akan dikenalkan sekilas fitur dari Mayukai Theme, font Iosevka Mayukai untuk pendampingnya, dan ketersediaan Mayukai Theme di Marketplace Open VSX dan VS Code.
Perkenalan Ekstensi Mayukai Theme
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, Gruvbox, 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. Metode pembuatan tema ini telah penulis jelaskan secara detail di artikel lain dari blog Medium ini, yang salah satunya adalah menggunakan tools template tema yang disediakan oleh Ayu Theme.
Tema Mayukai terdiri dari beberapa paket pewarnaan atau color scheme. Setiap paket pewarnaan terinspirasi dari warna tema lain yang sudah ada, tetapi dengan perbaikan pilihan warna untuk pewarnaan kata dan baris kode. Paket pewarnaan yang disediakan yaitu :
- Mayukai Mirage.
- Mayukai Mirage Darker.
- Mayukai Semantic Mirage (untuk VS Code Semantic Highlighting).
- Mayukai Dark.
- Mayukai Darker.
- Mayukai Mirage Gruvbox Darktooth.
- Mayukai Mono.
- Mayukai Alucard.
- Mayukai Sunset.
Mayukai Theme ini dapat diunduh langsung di VS Code Marketplace melalui tautan berikut ini. Atau dapat dicari langsung dari Marketplace di dalam text editor VS Code dengan kata kunci pencarian “mayukai”.
Mayukai Mirage dan Mayukai Dark terinspirasi dari susunan warna (color swatch) yang dipakai oleh Ayu Theme. Teknik pewarnaan yang dipakai sesuai dengan konsep tema Monokai dan Monokai Pro. Penggunaan color swatch Ayu Theme memberikan efek warna serba kuning dan orange untuk membedakan jenis variabel dan fungsi. Contoh pewarnaan tema Mayukai Mirage dan Mayukai Dark pada baris kode dapat dilihat di bawah ini.
Mayukai Mirage Gruvbox Darktooth menggunakan color swatch dari tema Gruvbox dan Darktooth. Bagi developer yang pernah memakai text editor Vim ataupun Emacs, pasti sudah kenal dengan color swatch Gruvbox dan Darktooth. Tema Gruvbox memberikan efek klasik dengan dominasi coklat dan warna yang vibrant layaknya tampilan monitor komputer CRT jaman dahulu. Beberapa developer menyukai tema ini karena membuat mata rileks namun dengan ketajaman warna kode yang tetap terjaga. Contoh bentuk pewarnaan Mayukai Mirage Gruvbox Darktooth dapat dilihat di bawah ini.
Mayukai Alucard adalah tema yang terinspirasi dari color swatch tema Dracula. Color swatch yang dipakai untuk Mayukai disesuaikan terlebih dahulu agar warna yang dipakai tidak terlalu mencolok mata namun tidak juga terlalu redup. Penamaan Alucard sendiri adalah kebalikan dari susunan huruf Dracula, yang bisa disebut dengan kata palindrome. Hal ini sesuai dengan konsep yang dipakai oleh Mayukai Alucard, dimana ada pewarnaan yang dibalik antara warna yang satu dengan yang warna yang lain, sehingga berbeda dengan tema Dracula. Contohnya adalah pewarnaan variabel string dan pewarnaan fungsi yang dibalik pilihan warnanya.
Mayukai Mono adalah tema yang menjadi favorit pengguna diantara semua color scheme Mayukai yang tersedia. Hal ini dikarenakan Mayukai Mono menggunakan beberapa pilihan warna campuran dari Monokai Pro dan Monokai Original. Color swatch dari kedua tema tersebut dimodifikasi sedikit pada beberapa kode warnanya, agar sesuai dengan latar belakang kebiruan yang menjadi warna dasar Mayukai Theme ini. Hasilnya adalah tema yang meriah dan nyaman di mata, namun tetap membuat kode lebih mudah dibaca.
Mayukai Sunset adalah tema warna yang terinspirasi dari suasana senja menjelang malam. Tema ini dibuat berdasarkan dari saran pengguna yang banyak menginginkan varian tambahan dengan menggunakan warna serba kuning dan orange dari Ayu Colors. Beberapa kombinasi warna yang dipakai adalah merah muda, kuning, orange, dan hijau. Latar belakang teks editor dibuat lebih gelap sehingga nyaman ditampilkan di layar monitor LED dan LCD. Contoh tampilan warna teks pada tema Mayukai Sunset dapat dilihat pada tangkapan layar di bawah ini. Untuk bentuk tampilan HTML dan CSS masih sama dengan skema warna Mayukai yang lainnya.
Mayukai Semantic Mirage adalah tema yang sama dengan Mayukai Mirage. Perbedaannya adalah Mayukai Semantic Mirage ini dibuat untuk mendukung fitur Semantic Highlighting yang ada di VS Code versi 1.45.x ke atas atau yang lebih baru. Semantic Highlighting ini merupakan bagian dari Language Services dan Intellisense yang ada di VS Code, dimana pewarnaan kode dilakukan setelah VS Code melakukan analisis kode bahasa pemrograman yang dibuka. Pada beberapa tema, fitur ini membuat pewarnaan kode menjadi tidak konsisten dan berantakan, sehingga fitur ini hanya aktif pada tema yang benar-benar mendukungnya. Panduan pewarnaan tema ini juga berbeda dari tema biasa, karena menggunakan semantic token scope, bukan lagi memakai TextMate token scope.
Untuk menggunakan color scheme Mayukai Semantic Mirage, aktifkan terlebih dahulu Semantic Highlighting di setelan VS Code. Kalian dapat mencarinya dengan mengetik kata kunci pencarian “semantic” , dan hasilnya akan muncul di bawah ini. Berikan tanda centang pada konfigurasi Editor > Semantic Highlighting: Enabled.
Setelah diaktifkan, maka tampilan kode program dengan tema Mayukai Semantic Mirage akan menjadi seperti di bawah ini.
Catatan Penting Yang Perlu Diketahui
Color scheme Mayukai selain Mayukai Semantic Mirage, tidak mendukung fitur Semantic Highlighting di VS Code. Pastikan kalian mematikan fitur ini ketika menggunakan color scheme Mayukai Mirage, Mayukai Dark, Mayukai Gruvbox, Mayukai Alucard, dan Mayukai Mono. Hal ini dikarenakan tema tersebut menggunakan teknik pewarnaan TextMate Scopes standar, bukan menggunakan teknik Semantic Token milik VS Code.
Kalian juga dapat menonaktifkan Semantic Highlighting tersebut dengan menambahkan konfigurasi ke file Settings.json milik VS Code dengan baris berikut.
"editor.semanticTokenColorCustomizations": {
"enabled": false
},
"editor.semanticHighlighting.enabled": false,Color scheme Mayukai yang telah disebutkan di atas dibuat sesuai dengan kebutuhan penulis dan pengguna yang cocok. Silahkan dipakai secara gratis dan bebas dengan mengunduh ekstensi tema tersebut dari VS Code Marketplace.
Iosevka Mayukai
Selain eksperimen membuat ekstensi tema VS Code di atas, penulis juga mencoba eksperimen membuat font Iosevka yang telah dikustomisasi . Font ini dibuat dengan menggunakan basis font monospace untuk teks editor pemrograman yang bernama Iosevka. Konfigurasi yang dipakai untuk pembuatan font Iosevka Custom ini adalah campuran konfigurasi Iosevka SS04 , Iosevka SS09, Iosevka SS07, dan Iosevka SS14 . Hasil dari perpaduan tersebut adalah menghasilkan font Iosevka yang unik dan menarik, dengan gaya font seperti Menlo, Source Code Pro, Monaco, dan Jetbrains Mono. Font ini diberi nama Iosevka Mayukai. Font ini juga dilengkapi dengan ligature yang lengkap seperti halnya font Fira Code. Bagi pengguna Terminal yang mendukung dengan Unicode Icon dan Glyph, tersedia juga varian Iosevka Mayukai Nerd. Varian Nerd font ini telah ditambahkan patch Glyph dengan menggunakan tools Nerd Fonts dari Ryanoasis .
Font Iosevka Mayukai dapat dipakai sebagai font untuk text editor ataupun IDE, seperti pada text editor VS Code. Bagi mereka yang ingin mencoba, penulis telah menyediakan file .ttf font tersebut yang dapat diunduh diunduh pada halaman Github Release Page atau Google Drive yang disediakan. Kemudian lakukan instalasi sesuai dengan cara di masing-masing sistem operasi.
Instalasi font Iosevka Mayukai pada sistem operasi Linux dapat dilakukan dengan mudah, yaitu dengan menyalin file .ttf yang telah diunduh ke folder ./local/share/fonts . Kemudian jalankan perintah sudo fc-cache -f -v di Terminal command line. Untuk sistem operasi lain seperti macOS dan Windows, instalasi dapat dilakukan dengan mudah melalui aplikasi FontBook atau Font Manager yang disediakan di masing-masing sistem operasi. Setelah proses instalasi, jangan lupa untuk mengaktifkan font tersebut di konfigurasi text editor / IDE yang dipakai. Contoh aktivasi font Iosevka Mayukai di VS Code dapat dilihat pada tangkapan layar di bawah ini.
Penulis biasanya memasangkan font Iosevka Mayukai dengan tema VS Code Mayukai Theme. Hasil kombinasinya dapat dilihat pada tangkapan layar di bawah ini.
Pengenalan Open VSX Registry untuk Eclipse Theia , VS Codium, dan Code OSS
Beberapa waktu yang lalu, Eclipse Foundation merilis sebuah layanan text editor online yang diberi nama Eclipse Theia. Editor online Eclipse Theia dibuat dengan berbasiskan kode sumber Visual Studio Code yang berjalan di server dan browser secara online. Konsep yang mirip dengan VS Codium dan Code OSS namun berjalan di server cloud . Eclipse Theia menggunakan komponen-komponen dan binary VS Code yang benar-benar open source, dan menghapus beberapa binary dari Microsoft yang bersifat closed source. Eclipse Theia dapat dijalankan melalui Gitpod, atau dijalankan di server sendiri dengan bantuan Docker dan Kubernetes.
Bersamaan dengan rilisnya Eclipse Theia, Eclipse Foundation juga merilis toko online untuk penyedia ekstensinya. Marketplace ekstensi ini diperuntukan bagi text editor turunan VS Code seperti Theia, VS Codium dan Code OSS. Marketplace ini diberi nama Eclipse Open VSX Registry.
Salah satu alasan rilisnya Open VSX Registry adalah dikarenakan “terms of use” Visual Studio Marketplace sifatnya tidak “open source”. Microsoft hanya mengizinkan penggunaan VS Code Marketplace untuk produk Visual Studio. Sedangkan untuk text editor turunan VS Code tidak diperbolehkan menggunakannya. Hal ini yang menjadi salah satu alasan kenapa Eclipse membuat Open VSX Registry yang bersifat netral dan tidak terikat oleh vendor apapun.
Salah satu kelebihan dari Open VSX Registry adalah bisa dijalankan di server sendiri atau self hosted. Cocok bagi perusahaan yang ingin membuat Custom build VS Code dengan Marketplace sendiri milik perusahaan.
Text editor VS Codium dan Code OSS pun telah menggunakan Open VSX Registry pada rilis terbarunya, yaitu versi 1.46.x. Perubahan sumber unduhan ekstensi ke Open VSX Registry membuat beberapa ekstensi tidak ditemukan di Marketplace VS Codium/Code OSS, tetapi malah ditemukan di Marketplace VS Code. Hal ini disebabkan pengembang ekstensi tersebut belum mengunggah ekstensinya ke Open VSX Registry.
Ketersediaan Mayukai Theme di Open VSX Registry
Pengembang ekstensi VS Code dapat merilis ekstensi yang telah mereka buat ke Open VSX Registry. Caranya cukup mudah dan perlu sedikit penyesuaian saja, seperti yang tercantum di halaman Wiki di bawah ini.
Ekstensi Mayukai Theme telah tersedia di Open VSX Registry. Pengguna VS Codium dan Code OSS dapat mencari ekstensi tersebut melalui menu Marketplace di text editor-nya dengan kata kunci pencarian “mayukai”.
Demikian tulisan kali ini tentang tema Mayukai, font Iosevka Mayukai, dan ketersediannya pada Open VSX Registry. Terima kasih bagi yang sudah membaca dan mencobanya, dan selamat berkode dan pengkodean aplikasi. :)
