Ketika Anda menghabiskan banyak waktu di depan editor, kenyamanan visual menjadi faktor penting. Cara mengubah tema dan font di Visual Studio Code adalah langkah mudah yang dapat meningkatkan fokus, mengurangi kelelahan mata, dan membantu Anda bekerja lebih produktif. Dalam panduan ini, Anda akan mempelajari bagaimana mengganti tema warna, mengatur font, mengimpor tema baru, hingga menyesuaikan editor agar nyaman dipakai dalam jangka panjang.

Mengapa Mengubah Tema dan Font di VS Code Penting?

Visual Studio Code (VS Code) adalah editor yang sangat fleksibel dan memungkinkan pengguna mempersonalisasi tampilan sesuai kebutuhan. Setiap developer memiliki preferensi visual masing-masing. Ada yang nyaman dengan tema gelap untuk mengurangi silau, ada yang lebih suka tema terang yang membuat teks tampak lebih jelas.

Pengaturan tema dan font bukan hanya soal estetika, tetapi juga berdampak pada:

Kelelahan mata saat coding lama
Kejelasan syntax highlighting
Kenyamanan membaca dan menulis kode
Produktivitas dan fokus
Konsistensi tampilan di berbagai proyek

Karena alasan itulah, memahami cara menyesuaikan tampilan VS Code menjadi keterampilan penting.

Cara Mengubah Tema di VS Code

VS Code menyediakan tema bawaan yang bisa langsung Anda pakai, seperti Dark+, Light+, Dark Modern, dan Light Modern. Selain itu, Anda juga dapat memasang tema tambahan dari marketplace.

A. Mengganti Tema Bawaan

Berikut langkah termudah untuk mengubah tema:

Buka VS Code.
Tekan Ctrl + Shift + P.
Ketik Preferences: Color Theme.
Pilih tema yang Anda inginkan dari daftar.

Saat memilih, VS Code akan menampilkan preview langsung tanpa harus menyimpan terlebih dahulu.

Beberapa tema bawaan populer:

Dark+ (Default Dark)
Light+ (Default Light)
Dark Modern
High Contrast Dark

B. Menginstal Tema Tambahan dari Marketplace

Jika ingin tampilan yang lebih unik, Anda bisa menginstal tema dari marketplace.

Caranya:

Klik icon Extensions di sidebar kiri.
Ketik kata kunci, misalnya:
- “dark theme”
- “light theme”
- “material theme”
Pilih tema yang disukai, lalu klik Install.
Setelah terpasang, kembali ke Color Theme untuk mengaktifkannya.

Rekomendasi Tema Populer:

Material Theme
Dracula Official
One Dark Pro
Night Owl
Tokyo Night

Tema-tema ini banyak digunakan developer karena kombinasi warnanya nyaman di mata.

Cara Mengubah Font di VS Code

Selain tema, font sangat berpengaruh pada kenyamanan coding. VS Code mendukung perubahan font, ukuran font, spacing, hingga ligature.

A. Mengubah Jenis Font

Cara mengubah font utama:

Buka File → Preferences → Settings.
Cari Font Family.

Masukkan nama font monospaced, misalnya:

Fira Code, Consolas, 'Courier New', monospace

Rekomendasi Font untuk Coding:

Fira Code (mendukung ligatures)
JetBrains Mono
Cascadia Code
Source Code Pro
Ubuntu Mono

Font monospace penting agar lebar tiap karakter sama, sehingga kode terlihat rapi dan mudah dibaca.

B. Mengatur Ukuran Font (Font Size)

Jika tulisan terlalu kecil atau terlalu besar, Anda bisa mengaturnya:

Masuk ke Settings.
Cari Editor: Font Size.
Masukkan nilai, misalnya 14 atau 16.

Ukuran ideal biasanya berada di kisaran 14–16 px.

C. Mengaktifkan Font Ligatures

Font ligatures membuat beberapa simbol disatukan, seperti => menjadi lebih estetis. Ini opsional, tetapi banyak developer menyukainya.

Cara mengaktifkan:

Install font yang mendukung ligatures (misalnya Fira Code atau Cascadia Code).
Masuk ke Settings.
Cari Font Ligatures.
Centang atau aktifkan opsi tersebut.

Jika ingin memasukkan pengaturan manual, tambahkan di settings.json:

"editor.fontLigatures": true

D. Mengubah Line Height dan Letter Spacing

Untuk kenyamanan ekstra, Anda dapat menyesuaikan jarak antar baris dan karakter.

Line Height

"editor.lineHeight": 22

Letter Spacing

"editor.letterSpacing": 0.5

Menyesuaikan spacing membantu membuat kode lebih mudah dipindai mata.

Cara Mengedit Pengaturan Langsung di settings.json

VS Code menyediakan editor visual untuk Settings, tetapi Anda juga bisa mengatur secara manual.

Caranya:

Tekan Ctrl + Shift + P.
Ketik Preferences: Open Settings (JSON).

Contoh konfigurasi lengkap:

{
  "editor.fontFamily": "Fira Code, Consolas, 'Courier New', monospace",
  "editor.fontSize": 15,
  "editor.fontLigatures": true,
  "workbench.colorTheme": "Dracula",
  "editor.lineHeight": 22,
  "editor.letterSpacing": 0.5
}

Tips Memilih Tema dan Font yang Tepat

Agar hasilnya maksimal, berikut beberapa tips:

✔ Gunakan tema gelap jika bekerja lama di malam hari

Mengurangi kelelahan mata dan membantu fokus.

✔ Pilih font yang mendukung ligatures untuk tampilan kode lebih rapi

Terutama jika Anda sering menggunakan arrow function atau operator khusus.

✔ Gunakan ukuran font minimal 14 px

Agar tetap nyaman dibaca dalam sesi coding panjang.

✔ Sesuaikan line height untuk memisahkan baris

Rasio ideal biasanya 1.4 × font size.

✔ Coba beberapa tema hingga menemukan yang paling pas

Tidak semua warna cocok di setiap monitor atau pencahayaan ruangan.

Kesimpulan

Mengoptimalkan tampilan Visual Studio Code dengan menyesuaikan tema dan font adalah cara sederhana namun sangat berpengaruh untuk meningkatkan kenyamanan kerja. Dengan memahami cara mengubah tema dan font di Visual Studio Code, Anda bisa menciptakan lingkungan coding yang lebih fokus, rapi, dan sesuai gaya visual Anda sendiri. Mulai dari mengganti tema bawaan, menginstal tema tambahan, memilih font terbaik, hingga menggunakan ligatures—semuanya dapat dilakukan hanya dalam beberapa klik.

Jika Anda menghabiskan banyak waktu di depan editor setiap hari, mengatur tampilan VS Code bukan lagi sekadar estetika, tetapi investasi produktivitas.