Sharp looking VSCode on Chrome OS

So the Google Pixelbook is now my daily driver for front end coding as well as working on specifications. For that I use the great Visual Studio code. Unfortunately, with my external monitor everything becomes waaaay too small so I changed the scaling of Chrome OS to 130%

Chrome understands this quite well as web sites and desktop PWAs are nicely scaled. It even exposes a device pixel ratio of about 1.3

Unfortunately, Visual Studio Code is super blurry — so blurry that it is impossible for me to use professionally.

I have files a bug report to VSCode after talking to my friend Kenneth Auchenberg, who is the PM for VSCode, and I have found some work around that I am sharing here with you today.

VSCode is blurry on Chrome OS with scaling · Issue #64070 · Microsoft/vscode

910557 - HiDPI issue: VSCode looks very blurry on external monitor with scale applied - chromium …

The work around is setting the scale for GTK+/GDK to 2.0 and then set the right DPI using sommelier.

The CSS “pixel” is as a non-linear angular measurement of 0.0213 degrees viewing angle, which is approximately 1/96 of an inch at arm’s length. Source: CSS Absolute Lengths.

Apple decided when creating the iPhone that an iPhone is not helt at arms length, but at 60% of arms length, which in contract to a screen of 96 DPI (common for monitors) they used a DPI of 160 (96 / 0.6 = 160). This resulting in the device-pixel-ratio being 1 for DPI of 160, 2 for a DPI of 320.

This doesn’t totally follow the iPads — or even newer phones who has a device pixel ratio of 4 but a DPI of 458. The reasoning here is that bigger devices are helt further away, like maybe at 85% of arms length.

Needless to say, GDK only accepts integer scalings and Electron reflects that as a device-pixel-ratio. So setting the environment variable GDK_SCALE=2 scales up VSCode.

As CrOS is using Wayland we can scale the resulting view via sommelier

I ended up modifying /usr/bin/code and /usr/share/applications/code.desktop to actually call /usr/bin/code

According to Crostini my monitor has a DPI of 96:

So my scaled DPI would be 1.3*96 = 125.

My modified /usr/bin/code looks like:

And VSCode now looks sharp, though it has a wrong device-pixel-ratio of 2.

I hope this is useful for anyone using VSCode on their Pixelbooks with external monitor, though I hope this can be made to work out of the box