Mempercantik Windows 10/11 Untuk Ngoding ala anak indie (ft WSL)

Memasang WSL2

Di setup kali ini, karena saya menggunakan shell dan banyak tool di linux, penulis menggunakan Windows Subsystem Linux (WSL) untuk mengakses. Jadi teman — teman bisa memasang WSL terlebih dahulu jika mau, untuk artikel nya sudah disediakan di link dibawah.

Cara Cepat Memasang Windows Subsystem Linux (WSL) di Windows 10 / Windows 11

Perhatian

• Penulis menggunakan Ubuntu 20 di WSL2
• Penulis sudah mencoba di Windows 10 dan Windows 11
• Terhubung ke internet selama penerapan artikel ini

Aplikasi Terminal

Pertama, kita akan mengkustomisasi aplikasi terminal kita, yang mana aplikasi terminal yang dapat mengakses shell windows seperti Command Prompt dan Power Shell, serta WSL nya juga.

Jadi disini penulis menggunakan aplikasi bernama “Fluent Terminal” yang dapat diunduh di Microsoft Store.

Lalu ketika dibuka tampilan awalnya akan seperti dibawah berikut

Sekarang, mari kita melakukan kustomisasi beberapa agar tampilan fluent terminal lebih cantik.

• Penulis membuat “WSL” sebagai default shell ketika aplikasi FLuent Terminal ini dibuka

• Merubah Tema Terminal ke “Pine Rose” (Disini penulis menggunakan 2 referensi tema yang dapat dicoba, yaitu Pine Rose atau Tokyo Night, kalian bisa memilih salah satunya)

Untuk menggunakan Pine Rose, penulis melakukan beberapa modifikasi terhadap colornya, jadi jika ingin menggunakan preset sama bisa mendownload melalui :

https://drive.google.com/drive/folders/1K9qhiNdgRsBHJGAOy3BAACt0XYlJjhSj?usp=sharing

Setelah mengunduh preset file, muat tema nya.

Untuk referensi lain ada di link berikut :

Rosé Pine

GitHub - enkia/tokyo-night-vscode-theme: A clean, dark Visual Studio Code theme that celebrates the…

Rose Pine mempunyai banyak sekali tema yang disediakan untuk berbagai tools seperti Chrome, vscode, dan lain sebagainya yang dapat diunduh dan langsung digunakan, oleh karena itu penulis menggunakan ini.

• Mengganti Font ke “Fira Code” yang sudah di patch menggunakan Nerd Font

ini dimaksudkan agar nanti nya ketika Fluent Terminal digunakan untuk membuka linux shell, yang mana beberapa aplikasi terminal menggunakan icon dari font agar muncul dan tidak muncul simbol aneh.

Dapat diunduh di link berikut :

Nerd Fonts - Iconic font aggregator, glyphs/icons collection, & fonts patcher

Setelah mengunduh, lakukan instalasi font tersebut dengan mengklik kanan file icon lalu cari menu “Install for user”.

Setelah berhasil diinstall, Lalu ganti di settings Fluent Terminal, dibagian Font family ganti ke “FuraMono Nerd Font Mono”,

Hasil Akhir Tampilan Fluent Terminal

Hasil dari kustomisasi kita di part sebelumnya akan terlihat seperti berikut ketika kita menjalankan aplikasi Fluent Terminal di awal :

masih terlihat kurang? tenang, kita masih hanya mengkustomisasi luarnya saja, di part selanjutnya kita akan mengkustomisasi shell wsl kita.

Memasang ZSH dan OhMyZsh Sebagai Shell WSL

Buka WSL Ubuntu, lalu ketika perintah dibawah untuk melakukan update repo. lalu tunggu sampai selesai

sudo apt update

Setelah itu mari kita pasang zsh

sudo apt install zsh -y

Pasang ohmyzsh untuk memudahkan kita mengkonfigurasi zsh nantinya.

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Jika ada pertanyaan seperti dibawah tulis Y lalu enter untuk menjadikan default shell.

Setelah itu tampilan shell akan berubah menjadi seperti berikut

Untuk refrensei lebih lanjut, bisa dilihat di link berikut :

Zsh

Oh My Zsh - a delightful & open source framework for Zsh

Menggunakan Spaceship untuk Tema ZSH

Spaceship adalah salah satu tema yang minimalis dan clean, yang menurut saya sangat cocok sekali dengan setup kali ini.

Pertama kita unduh dulu config tema spaceship

git clone https://github.com/spaceship-prompt/spaceship-prompt.git "$ZSH_CUSTOM/themes/spaceship-prompt" --depth=1

Lalu kita aktifkan symlink :

ln -s "$ZSH_CUSTOM/themes/spaceship-prompt/spaceship.zsh-theme" "$ZSH_CUSTOM/themes/spaceship.zsh-theme"

Selanjutnya kita buka file konfigurasi .zshrc lalu ganti temanya

disini penulis menggunakan text editor vim untuk mengedit file — file konfigurasi nantinya.

Setelah terbuka file konfigurasinya, cari bagian “ZSH_THEME”

Untuk mengedit di text editor vim, kalian bisa tekan tombol i untuk mengubah ke mode insert, di pojok kiri akan ditandai dengan “INSERT” yang artinya sudah dalam mode tulis.

Lalu ganti ke

ZSH_THEME="spaceship"

Untuk keluar dari mode insert, tekan esc lalu indikator “INSERT” akan hilang dari pjok bawah kiri.

Lalu untuk menyimpan file di text editor vim, kalian bisa tekan tombol : untuk memunculkan command pallete.
Ketika menekan : akan muncul di kiri bawah pojok.

Selanjutnya tulis :wq yang artinya write (save) lalu q yang artinya quit . lalu enter untuk menjalankan perintahnya

Untuk merefresh shell, silahkan ketik zsh lagi, maka tampilan akan berubah

Untuk referensi lebih lanjut bisa dilihat di link berikut :

Spaceship

Menambahkan Beberapa Plugin ZSH

Agar lebih mudah lagi mari kita tambahkan beberapa plugin zsh, list dibawah adalah plugin basic untuk kustomisasi tampilan awal saja, jadi kalian bisa mencari banyak plugin yang bisa membantu lebih produktif lagi.

• Mengunduh zsh-autosuggestions
  Plugin yang akan memberikan suggestion berdasarkan riwayat perintah, jadi ketika kita mengetik sebuah perintah, akan muncul suggestion yang dapat membantu kita agar tidak perlu menulis ulang dari awal, cukup gunakan arah atas.

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

• Mengunduh zsh-syntax-highlighting
  Membuat perintah yang kita ketik menjadi lebih bewarna lagi.

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

• Mengunduh zsh-completions

git clone https://github.com/zsh-users/zsh-completions ${ZSH_CUSTOM:-${ZSH:-~/.oh-my-zsh}/custom}/plugins/zsh-completions

• Mengunduh Fuzzy Search
  Untuk mencari file dan riwayat perintah dengan cepat.

git clone https://github.com/unixorn/fzf-zsh-plugin.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/fzf-zsh-plugin

Setelah mengunduh ketiga plugin diatas, mari kita pasang. Untuk memasang cukup dengan mengkonfigurasi file .zshrc kembali, mari kita buka kembali file tersebut, jika masih belum tau, bisa lihat part sebelumnya bagaimana mengkonfigurasi file .zshrc menggunakan text editor vim.

vim ~/.zshrc

Lalu cari baris plugins=(git) lalu ganti menjadi :

plugins=(
  git
  zsh-syntax-highlighting
  fzf-zsh-plugin
  zsh-autosuggestions
  zsh-completions
)

Lalu tambahkan juga baris dibawah berikut sebelum baris
source “$ZSH/oh-my-zsh.sh”

fpath+=${ZSH_CUSTOM:-${ZSH:-~/.oh-my-zsh}/custom}/plugins/zsh-completions/src

Simpan konfigurasi tersebut, jika menggunakan vim silahkan ketik :wq

Lalu untuk merestart shell, ketik zsh lagi

Hasilnya akan seperti ini :

Jika membutuhkan referensi lebih lanjut, berikut :

GitHub - zsh-users/zsh-completions: Additional completion definitions for Zsh.

GitHub - zsh-users/zsh-syntax-highlighting: Fish shell like syntax highlighting for Zsh.

GitHub - zsh-users/zsh-autosuggestions: Fish-like autosuggestions for zsh

GitHub - unixorn/fzf-zsh-plugin: ZSH plugin to enable fzf searches of a lot more stuff - docker…

Mengganti Fungsi/Systemcall ke Pihak Ketiga yang Modern

Beberapa pengganti systemcall yang penulis gunakan adalah ;

• Exa — A modern replacement for ls

Exa membuat kita dapat melakukan listing file / folder, seperti ls di linux atau tree di windows, dan yang paling bagus dari Exa adalah dia bisa menampilkan icon juga tergantung dengan filenya

Pertama install unzip terlebih dahulu dan wget jika belum menginstall :

sudo apt install unzip wget -y

Selanjutnya untuk memasang nya :

sudo whoami && mkdir ~/temp_1 && cd ~/temp_1 && wget https://github.com/ogham/exa/releases/download/v0.10.0/exa-linux-x86_64-v0.10.0.zip && unzip exa-linux-x86_64-v0.10.0.zip && sudo mv ./bin/exa /usr/local/bin/exa && sudo mv ./completions/exa.zsh /usr/local/share/zsh/site-functions && cd ~ && rm -rf ~/temp_1

Untuk uji coba nya dan hasilnya :

• Bat — Replace cat

Selanjutnya adalah Bat, bat seperti cat , dimana digunakan untuk melihat isi file secara cepat dengan menampilkanya ke terminal. Yang bagus dari Bat adalah dapat menampilakn syntax higlight juga tergantung pada format text file yang kita buga

Cara memasang :

sudo apt install bat -y

Lalu hasilnya akan seperti ini :

Untuk referensi lebih lanjut, berikut link nya :

exa

GitHub - sharkdp/bat: A cat(1) clone with wings.

Menghubungkan VSCODE dengan WSL

Karena Visual Studio Code adalah buatan Microsoft, Microsoft pun sudah membuat VSCode dapat saling terhubung dengan WSL. Caranya cukup mudah, pertama — tama pastikan sudah terpasang VSCOde di windows, jika belum silahkan unduh dilink resminya, pilih sesuai dengan bit os kalian :

Download Visual Studio Code - Mac, Linux, Windows

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

Selanjutnya, buka vscode lalu menuju ke menu extension marketplace, install extension “Remote Development”

Jika sudah terinstall, sekarang mari kita kembali ke WSL, buka terminal WSL lalu kita update beberapa yang dibutuhkan :

sudo apt install ca-certificates -y

Selanjutnya, mari kita coba membuka vscode melalu wsl untuk memastikan apakah wsl sudah terhubung dengan vscode di windows kita.

disini penulis mencoba membuat folder baru di wsl

mkdir ~/project

lalu masuk ke directori tersebut

cd ~/project

Lalu buka vs code nya :

code .

vscode di wsl akan mendeteksi bahwa dia berjalan di wsl, jadi akan mengunduh vscode versi servernya secara otomatis

Lalu jika unduhan selesai, akan otomatis membuka vscode di windows kita secara otomatis

Bisa dilihat, divscode sudah tertulis “[WSL:UBUNTU-20.04]” yang artinya vscode di windows kita sudah terhubung ke vscode di wsl.

Mengubah Tampilan Visual Studio Code

Selanjutnya mari kita mengkustomisasi tampilan vscode.

Pertama — tama untuk melihat apakah tampilannya nanti berubah, penulis akan meng clone contoh projek yang nantinya dibuka divscode untuk menjadi contoh saja Lalu membukanya di vscode

cd ~/project
git clone https://github.com/viandwi24/nuxt3-awesome-starter
cd nuxt3-awesome-starter
code .

Pertama, install tema product icon

disini saya menggunakan Minimalist Product Icon, product icon adalah icon yang digunakan ui vscode secara dasar.

https://marketplace.visualstudio.com/items?itemName=ElAnandKumar.el-vsc-product-icon-theme

Sebelum Menggunakan :

Setelah Menggunakan :

Kedua, install tema icon

disini saya menggunakan popular icon saja yaitu Material Icon Theme.

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

Ketiga, install tema tampilan

Untuk tema tampilan text editor, penulis menggunakan Pine Rose agar sesuai dengan setup kali ini.

Lalu pilih “Rose Pine Moon”

https://marketplace.visualstudio.com/items?itemName=mvllow.rose-pine

Keempat, merubah font

Disini penulis menggunakan Dank Mono yang bisa dilihat di link dibawah

https://philpl.gumroad.com/l/dank-mono

Dank Mono adalah salah satu font popular yang berbayar, jika teman teman masih mau menggunakan font ini bisa mengunduh versi bajakan meskipun penulis sangat tidak merekomendasi kan hal ini.

Jika teman mau mencari alternatif dapat menggunakan Fira Code kembali.

Caranya, tekan f1 di vscode untuk memunculkan command pallete lalu pilih Open Setting (JSON)

Lalu ubah menjadi seperti dibawah ini

{
    "workbench.colorTheme": "Rosé Pine Moon",
    "workbench.productIconTheme": "el-vsc-v1-icons",
    "workbench.iconTheme": "material-icon-theme",
    "editor.inlineSuggest.enabled": true,
    "editor.fontFamily": "Dank Mono",
    "editor.fontLigatures": true,
    "editor.fontSize": 14,
    "terminal.integrated.fontFamily": "FuraMono Nerd Font Mono",
    "terminal.integrated.fontSize": 12
}

Lalu hasil akhirnya akan jadi seperti ini :

Menambahkan Beberapa Alias untuk Shell

Untuk menambahkan alias kedalam shell, alias adalah semacam kita dapat membuat alternatif perintah, contohnya untuk exa tadi dapat kita aliaskan menjadi ls dan lain sebagainya, karena menggunakan zsh, mari kita edit kembali file konfigurasi .zshrc

vim ~/.zshrc

Tambahkan berikut di baris paling akhir :

alias code="/mnt/c/Users/viand/AppData/Local/Programs/Microsoft\ VS\ Code/bin/code"
alias ez="vim ~/.zshrc && zsh"
alias ls="exa --icons --sort ext"
alias la="ls --long --header --grid"
alias cat="batcat"
alias notepad="/mnt/c/Windows/System32/notepad.exe"

Setelah itu simpan konfigurasi diatas, sekarang teman — teman bisa menggunakan perintah ls , la , cat seperti biasa, karena sudah saya buatkan aliasnya.

saya tambahkan juga contoh alias, dimana kita bisa membuat alias untuk perintah ke aplikasi windows, seperti pada contoh diatas yaitu notepad.

untuk melihat perubahan, lagi lagi harus melakukan restart shell, ketik zsh di terminal untuk memulai ulang shellnya, lalu berikut hasilnya:

Kustomisasi Desktop Menggunakan Rainmeter

Part sekarang sampai terakhir, kita akan mengkustomisasi desktop kita.

Pertama tama penulis akan menggunakan wallpaer dari link berikut :

https://twitter.com/luze_luzeluze/status/1279389235213033472?t=PQoZvYiV5iuTh8cxdXmPcg&s=08

Penulis melakukan beberapa kustomisasi berupa melakukan Flip secara Horziontal gambarnya, sehingga hasilnya jadi seperti dibawah :

https://drive.google.com/drive/folders/1K9qhiNdgRsBHJGAOy3BAACt0XYlJjhSj?usp=sharing

Selanjutnya, unduh rainmeter dari website resminya. lalu lakukan pemasangan.

https://www.rainmeter.net/

Lalu untuk widget yang digunakan, teman teman bisa download dari link berikut :

https://drive.google.com/drive/folders/1K9qhiNdgRsBHJGAOy3BAACt0XYlJjhSj?usp=sharing

Teman — teman silahkan unduh file “rainmeter_skins.rar” lalu ekstraksi kedalam folder

C:\Users\viand\Documents\Rainmeter\Skins

Jika sudah, buka rainmeter manager lalu ke tab “Layout”, isikan nama lalu klik save

Lalu akan muncul di sub select sebelah kanan, pilih lalu klik edit

Akan terbuka jendela notepad, silahkan buka lini dibawah lalu copy paste semua isi dari file “rainmeter_layout.ini”, lalu paste ke dalam file notepad yang terbuka tadi lalu klik save

Link Asset :
https://drive.google.com/drive/folders/1K9qhiNdgRsBHJGAOy3BAACt0XYlJjhSj?usp=sharing

Sebelum melakukan load layout, teman teman unduh juga font “Minecraft.ttf” lalu install.

Link Asset :
https://drive.google.com/drive/folders/1K9qhiNdgRsBHJGAOy3BAACt0XYlJjhSj?usp=sharing

Setelah itu, kembali ke rainmeter manager dan klik load.

Perlu di garis bawahi, layout ini hanya untuk resolusi 1920x1080!!!

Jika teman teman punya resolusi yang berbeda, teman — teman harus melakukan re arrange widget nya sendiri yah :)

Hasil akhirnya akan seperti ini :

Menambahkan Live Wallpaper dengan Wallpaper Engine

Penulis sudah membuat Live Wallpaper untuk mempercantik Wallpaper setup ini, bisa di unduh dari link dibawah :

Link Asset :
https://drive.google.com/drive/folders/1K9qhiNdgRsBHJGAOy3BAACt0XYlJjhSj?usp=sharing

Jangan lupa teman — teman harus mengunduh aplikasi Wallpaper Engine terlebih dahulu

https://store.steampowered.com/app/431960/Wallpaper_Engine/

Aplikasi diatas adalah berbaya, tapi jika teman — teman ingin melakukan pembajakan penulis sangat tidak merekomendasikan.

unduh file “walppaper-engine-spy-x.rar” lalu ekstraksi ke folder berikut :

C:\Program Files\Wallpaper Engine\projects\myprojects

Buka Wallpaper Engine Settings, lalu teman teman akan melihat item baru “spy-x”, klik dan wallpaper akan langsung muncul.

Transparan Taskbar dan Center Taskbar dengan TaskbarX (Windows 10)

Taskbarx adalah salah satu aplikasi kustomisasi taskbar untuk windows.

Link unduh app :
https://chrisandriessen.nl/taskbarx

Hasilnya akan seperti ini :

Untuk Windows 11, teman — teman bisa mencari sendiri seperti menggunakan aplikasi “translucenttb” di Windows Store

Hasil Akhir

Terimakasih sudah melihat artikel ini, semoga bermaanfaat !!!! :)
Salam, Alfian Dwi Nugraha.