'How to disable anti-aliasing in VisualStudio Code?

I disable anti-aliasing in TextMate. Here is a sample screenshot:

enter image description here

Here is the default in Visual Studio Code:

enter image description here

How can I disable anti-aliasing (font smoothing) in Visual Studio Code?



Solution 1:[1]

In your settings put this configuration: "workbench.fontAliasing": "antialiased"

The are three options: antialiased, default and none

Solution 2:[2]

I couldn't do this though VSCode itself (as it told me workbench.fontAliasing was not a valid setting), however I could apply it system-wide on my Linux machine, by adding this to a file like /etc/fonts/conf.d/99-example.conf:

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "urn:fontconfig:fonts.dtd">
<fontconfig>
  <match target="font">
    <test name="family" compare="eq" ignore-blanks="true">
      <string>Monoid</string>
    </test>
    <edit name="antialias" mode="assign">
      <bool>false</bool>
    </edit>
  </match>
</fontconfig>

Change Monoid to the name of the font you do not want to antialias in any program.

Restarting VSCode after creating the file resulted in no antialiasing for that font.

Solution 3:[3]

Have come here expecting anti-aliasing not to work (not having used VS.Code for couple of years). But today on version 1.50.1 with all Windows 10 anti-aliasing disabled (see links below) it seems to have been inherited into VS.Code. Doesn't work in some dialogue boxes as can bee seen from screenshot (click on the picture to see in native resolution, it's not that clear form the embedded image).

enter image description here

LINKS

Disable Anti-Aliasing https://superuser.com/questions/367230/how-to-turn-off-cleartype-and-use-whole-pixel-anti-aliasing-in-windows-7/947278

https://answers.microsoft.com/en-us/insider/forum/all/how-to-disable-anti-aliasing-in-windows-10/9e1370e9-9eaa-4840-97ed-0fee855e6e88

ClearType Switch http://karpolan.com/software/cleartype-switch/

Solution 4:[4]

This is what works for me on Ubuntu.

Step 1. Create file ~/.config/fontconfig/fonts.conf, if it doesn't exist.

Step 2. Add this (or update accordingly, if the file already exists):

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
<!--ANTIALIAS--><match target="font">
<edit name="antialias" mode="assign"><bool>false</bool></edit>
</match>
</fontconfig>

Note: this will affect all Chromium-based applications (which includes Electron applications).

Solution 5:[5]

Create & edit the following file (in this case via the nano editor):

mkdir -p ~/.config/fontconfig
nano ~/.config/fontconfig/fonts.conf

Paste the following content to that file:

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
  <match target="pattern">
   <test qual="any" name="family"><string>monospace</string></test>
   <edit name="family" mode="prepend" binding="same"><string>Droid Sans Mono</string></edit>
  </match>

  <match target="pattern">
    <test qual="any" name="family"><string>Droid Sans Mono</string></test>
    <edit name="antialias" mode="assign"><bool>false</bool></edit>
    <edit name="hintstyle" mode="assign"><const>hintnone</const></edit>
    <edit name="hinting" mode="assign"><bool>false</bool></edit>
    <edit name="rgba" mode="assign"><const>rgb</const></edit>
    <edit name="lcdfilter" mode="assign"><const>lcddefault</const></edit>

  <match target="pattern">
    <test qual="any" name="family"><string>DejaVu Sans Mono</string></test>
    <edit name="antialias" mode="assign"><bool>false</bool></edit>
    <edit name="hintstyle" mode="assign"><const>hintslight</const></edit>
    <edit name="hinting" mode="assign"><bool>false</bool></edit>
    <edit name="rgba" mode="assign"><const>rgb</const></edit>
    <edit name="lcdfilter" mode="assign"><const>lcddefault</const></edit>
  </match>
</fontconfig>

This will disable anti-aliasing and hinting, only for the monospace fonts.

All the monospace fonts are now linked to "Droid Sans Mono". And any pattern matching font family you define as well will disable the anti-alias and hinting. You can remove the first match and only define your fonts you want to disable anti-alias on.

Important: Also you properly want to download Droid or download DejaVu and install the fonts if didn't have them already preinstalled.


Alternatively, disabling anti-alias and hinting for all fonts and applications is also an option (most likely not preferred):

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
  <match target="font">
    <edit name="antialias" mode="assign"><bool>false</bool></edit>
    <edit name="hintstyle" mode="assign"><const>hintnone</const></edit>
    <edit name="hinting" mode="assign"><bool>false</bool></edit>
    <edit name="rgba" mode="assign"><const>rgb</const></edit>
    <edit name="lcdfilter" mode="assign"><const>lcddefault</const></edit>    
  </match>
</fontconfig>

Again, snipped above will disable anti-alias to all your fonts under Linux!

More config options see: https://www.freedesktop.org/software/fontconfig/fontconfig-user.html

Solution 6:[6]

For those willing to disable anti-aliasing/smooth edges/cleartype on VS Code as of today, there's no official option inside the VS Code program to do it. Instead, I have found this method that works for me, and it's thanks to this article: https://medium.com/kasun-kodagoda/fix-text-becomes-blurry-when-vs-code-application-loses-focus-issue-on-windows-d95697b2f927

The method is as follows:

<img src="https://i.stack.imgur.com/L2i9S.png" alt="..." />

Disable anti-aliasing VSCode

  1. Right click on VS Code program and go to Proprieties.

  2. In the "target" section of the app, add the following lines: --disable-gpu --enable-use-zoom-for-dsf

  3. Apply the changes and that's it.

I hope it's useful. 

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 bbernag
Solution 2 Malvineous
Solution 3 user7660047
Solution 4
Solution 5
Solution 6 k2you