Enable font anti-aliasing on VS Code (Retina Screens)

Published Feb 03, 2017
Enable font anti-aliasing on VS Code (Retina Screens)

How to enable font antialiasing on VS Code

For programmers with a Retina screen, we know how beautiful anti-aliased fonts can be, but since the big switch from Atom and Sublime Text to VS Code, we have forfeited this luxury, with no official support for font anti-aliasing on VS Code, there are two ways right now, that I know to enable font anti-aliasing on VS Code.

Method 1

To set it manually Go to Help > Toggle Developer tools and then paste -webkit-font-smoothing: antialiased in the CSS section of the body or .editor-container if you are patient enough to look for it. The only problem with this approach is that it's a temporary fix, once you close and restart VS Code, you lose the setting and you'll have to this again to get it back.

Method 2 (Permanent Hack)

So, this method is permanent kinda, but you'll lose this one on updates of VS Code and it means you have to do it again after updates, which is convenient for me.
Open Finder go to your Applications folder, look for VS Code, right click on VS Code and choose Show Package Contents and navigate to /Contents => /Resources => /app => /out => /vs => /workbench => /electron-browser, then open the file workbench.main.css then do a cmd + F to find .editor-container then when you find it, add -webkit-font-smoothing: antialiased; as a property of that css class: .editor-container, and you are done, save the file and Restart VS Code, you should see the difference.

However, VS Code will always show you this warning whenever you start VS Code, but it's just a warning 😐 :Screen Shot 2017-02-02 at 23.36.01.png
You can do whatever you wish with the warning. 😃

Before:Screen Shot 2017-02-02 at 23.35.27.png

After:Screen Shot 2017-02-02 at 23.34.23.png

The difference is very glaring on Retina Screens.


You can find me on Github or Twitter.

Discover and read more posts from Funsho S.
get started