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 :
You can do whatever you wish with the warning.
Before:
After:
The difference is very glaring on Retina Screens
.
Didn’t work for me. MBP 2015 Retina, Sierra 10.12.6, VsCode 1.33.1. I think that css changed since the article was written. There is css property in .editor-container { display:none;}