🌟 Aesthetic & Clean Setup for VS Code 🌟

🚀 Buat VS Code kamu lebih aesthetic, clean, dan nyaman untuk coding dengan tema, ikon, dan font yang pas!

📌 Table of Contents

• 🗈️ Ekstensi Prasyarat
• 🎨 Kostumisasi VS Code
  • 1️⃣ Buat File .vscode/settings.json
  • 2️⃣ Tambahkan Custom CSS & JS
  • 3️⃣ Update Path Custom CSS & JS
  • 4️⃣ Reload VS Code
  • 5️⃣ Customisasi Tambahan
• 💻 Kostumisasi Terminal
• 🛠️ Troubleshooting
• 🎯 Rekomendasi Ekstensi Tambahan

---

🗈️ Ekstensi Prasyarat

Sebelum mulai, pastikan kamu sudah menginstal dan mengaktifkan ekstensi berikut:

🔹 GitHub Theme (Gunakan tema GitHub Dark Default)
🔹 JetBrains Icon Theme (Untuk ikon file)
🔹 Fluent Product Icons
🔹 Custom CSS and JS Loader
🔹 Fira Code (Font dengan ligatures keren 😍)

---

🎨 Kostumisasi VS Code

💡 Catatan: Kostumisasi ini hanya berlaku untuk proyek tertentu dengan cara membuat file .vscode/settings.json sehingga tidak mengganti settingan default VS Code.

1️⃣ Buat File .vscode/settings.json

Buat folder .vscode di dalam proyekmu, lalu tambahkan file settings.json seperti pada file ini.

2️⃣ Tambahkan Custom CSS & JS

Unduh folder vscode-custom yang berisi:
✅ style.css – Untuk mengubah tampilan VS Code 🎨
✅ script.js – Untuk tweak UI tambahan 💻

📝 Langkah-langkah:

1. Letakkan folder vscode-custom di C:/Users/{your_username}/.vscode/
2. Jika folder .vscode tidak ada, buat secara manual.

3️⃣ Update Path Custom CSS & JS

Pastikan path di settings.json sudah benar sesuai dengan folder yang kamu simpan.

4️⃣ Reload VS Code

Jalankan perintah berikut di Command Palette (Ctrl + Shift + P):

Reload Custom CSS and JS

VS Code akan restart dan tampilan barumu akan muncul! 🎉

5️⃣ Customisasi Tambahan

• Sesuaikan warna di style.css
• Tambahkan efek animasi jika diperlukan
• Gunakan ekstensi tambahan untuk lebih banyak tweak

---

💻 Kostumisasi Terminal

🌟 Buat terminal kamu lebih aesthetic dengan Oh My Posh!

📝 Install Oh My Posh

Windows

winget install JanDeDobbeleer.OhMyPosh -s winget

MacOS

brew install jandedobbeleer/oh-my-posh/oh-my-posh

Linux

curl -s https://ohmyposh.dev/install.sh | bash

🎮 Pilih Tema Blue Owl

Jalankan perintah berikut untuk mengaktifkan tema blue-owl:

oh-my-posh init pwsh --config $(oh-my-posh print-config --config blue-owl) | Invoke-Expression

💡 Jika menggunakan bash/zsh, ubah pwsh ke bash atau zsh.

🔄 Agar tetap aktif setelah restart: Edit file ~/.bashrc atau ~/.zshrc, tambahkan:

eval "$(oh-my-posh init bash --config $(oh-my-posh print-config --config blue-owl))"

---

🛠️ Troubleshooting

🔍 Custom CSS & JS Tidak Berfungsi?
✔️ Pastikan ekstensi Custom CSS and JS Loader sudah aktif.
✔️ Pastikan path di settings.json benar.
✔️ Jalankan kembali perintah Reload Custom CSS and JS dari Command Palette (Ctrl + Shift + P).

🔍 Oh My Posh Tidak Berjalan?
✔️ Pastikan sudah restart terminal setelah mengubah konfigurasi.
✔️ Cek dengan perintah oh-my-posh --version untuk memastikan Oh My Posh terinstal dengan benar.
✔️ Jika tidak muncul di PowerShell, pastikan $PROFILE tidak di-disable dengan perintah:

Get-ExecutionPolicy

Jika outputnya Restricted, jalankan:

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

---

🎯 Rekomendasi Ekstensi Tambahan

🎨 Peacock – Mewarnai workspace agar lebih mudah dibedakan.
🏆 Indent-Rainbow – Memberi warna berbeda pada indentation level.
🌍 Material Theme – Alternatif tema selain GitHub Theme.
💎 Bracket Pair Colorizer – Membantu membedakan pasangan tanda kurung.
🔍 Auto Rename Tag – Mempermudah editing HTML dan JSX dengan otomatis mengganti tag pasangan.

---

🎉 Selamat! VS Code kamu sekarang lebih aesthetic dan clean! 🚀