Visual Studio Code - Fix ZSH Font on Terminal

Visual Studio Code - Fix ZSH Font on Terminal

This article in Bahasa, are you looking for English language? Google Translate is your friend, or simply click here.

Visual Studio Code atau yang akrab dipanggil vscode adalah sebuah aplikasi code editor gratis dari Microsoft berbasis desktop dan daring. Aplikasi ini cukup populer dikalangan perekayasa perangkat lunak, karena gratis dan memiliki banyak fitur yang memudahkan penggunanya. Salah satu fitur yang sering saya gunakan pada aplikasi ini adalah terminal. Tidak ada yang salah dengan terminal pada vscode, semua berjalan normal jika anda belum melakukan kustomisasi pada terminal bawaan. Namun, karena saya sudah melakukan kustomisasi font yang digunakan, ada masalah estetika yang muncul seperti pada gambar di bawah ini.

vscode-font-problem.png

Tentunya, masalah ini mengganggu mata saya ketika menggunakan terminal pada vscode. Sebagai catatan, saya menggunakan iTerm2 untuk aplikasi pengganti terminal bawaan. Awalnya iTerm2 memiliki masalah yang sama dan teratasi dengan mengganti konfigurasi font.

item2-font-config.png

Cara tersebut juga saya terapkan pada vscode, dan berhasil mengatasi masalah tampilan font yang mengganggu. Berikut langkah-langkahnya:

(1). Buka vscode, kemudian pilih menu Code - Preferences - Settings. Jika anda menggunakan sistem operasi Microsoft Windows, anda bisa memilih menu File - Preferences - Settings.

vscode-preferences.png

(2). Selanjutnya pada kolom pencarian ketikkan "terminal integrated font family". Kemudian masukkan font kustom yang digunakan, disini saya menggunakan "MesloLGS NF".

vscode-integrated-font.png

(3). Restart terminal pada vscode atau cara yang lebih sederhana adalah tutup dan buka kembali terminal. Seharusnya terminal pada vscode sudah tidak bermasalah menampilkan kustomisasi font.

vscode-terminal-normal.png