Hack VS Code sidebar widgets

vscode-debug-sidebar-customization.md

Intro

Microsoft has done a great job with VSCode. One thing I dislike is that they hardcoded "font-family" and "font-size" on debug sidebar panel. I'm not sure why they didn't made them configurable while the default hardcoded style looks horrible and illegible. But, there is a way to fix this!

As VSCode app is based on Electron, you can alter the style of any interface of this IDE by editing corresponding CSS files. Here are some of my preferences:

• Visual Studion version 1.51.1

Edit workbench.main.css, and add the following style changes to the end.

Absolute path of workbench.main.css in my Mac is :

file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.css

Tweak sidebar debug panel font size

.monaco-workbench.mac .debug-hover-widget .monaco-list-row .expression,
.monaco-workbench.mac .debug-pane .monaco-list-row .expression {
  font-size: 12px;
}

Tweak code editor UI

.monaco-editor .view-line {
    font-size: 13.1px;
}

.mac {
    --monaco-monospace-font: Menlo, "DejaVu Sans Mono", Monaco, "Liberation Mono", “Inconsolata”, ”Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", "monospace"
}