Text style of Inlay Hints

Question

I would like to learn how can I change the textStyle of inlay hints in VSCode. I made a search and I was only able to find how to change its color, but sadly I can't change its textStyle such as making it italic.

For example I want the target to be italic

I tried these which did not work:

 {
      scope: "inlayHint",
      settings: {
        fontStyle: "italic",
      },
    },

For scope I also tried editor.inlayHint etc but neither did work.

Answer 1

Setting the Font-style to italic isn't Possible.

Not all is lost though, there's a workaround that actually works pretty well.

---

As I stated above, setting the font-style to italic is not possible. There is, however, a workaround, and it works pretty darn well. Before I explain the workaround, I think its important to note that the first solution I tried to use, was to set the font to an italic variant, unfortunately setting "editor.inlayHints.fontFamily" to an italic variant of a font was something that VS Code didn't seem to allow. I have seen this in many other situations. The idea is, since you can't do this "fontStyle": "italic", you just change the font to an italic version.

For example:

If I use Cascadia Code as my font, then — in theory — I can just us the following configuration:

// @file "settings.json"

{
    "editor.inlayHints.fontFamily": "'Cascadia Code Italic'"
}

...however, it unfortunately doesn't work that way — or at-least not in this situation. Not only do italic varients not work, but neither do bold variants and/or expanded variants (i.e. 'Inconsolata SemiExpanded', 'Inconsolata Bold', etc...).

While moving forward, I will state the obvious:

There is no "editor.inlayHints.fontStyle" setting.

---

So what do we do?

Well we can set the font-family using "editor.inlayHints.fontFamily".

Its a bit suprising that we can set the font, but not the font's style. I am not sure why they designed it this way, but it's obvious that they built the feature with specific constraints for reasons that are beyond me (reading the feature's development feed on GitHub would probably help anyone who wanted to know more about why the feature works how it does). Nevertheless, we have a highly customizable setting, that actually gives us far more control than the setting that we established, does not exist, editor.inlayHints.font.

What I do, personally, which has a cool tricked-out look, is I find a non-monospaced hand-written style of font — usually from Google Fonts — and I assign that to the font-family. It took me a while to find some fonts that work. Anyone who has ever played with fonts, trying to find which font works best for them to write code with, will know: Picking fonts that are used anywhere inside the editor (or inside your code) is going to require great scrutiny, and the longer you code, the more set in your ways you get, so this can actually be a time consuming setting to configure. It took me an hour to settle on a font, and I settled on using the "Sriracha" font-family. Siracha is oblique in appearance (looks italic), its readable in the editor, it renders well in the editor (which not all fonts are going to do), and its slightly bolder than the standard weight of the font I use wich is Cascadia Code.

---

My Configuration results in the following appearance:

When changing the font family, there are a couple other settings that help to configure this feature.

So, in other words, just do the following:

1. Download the italic &/or bold style font you wont from Google Fonts, Font Squirrel, or some other font source you perfer.

2. Set the font family using "editor.inlayHints.fontFamily".

3. Critique the fonts configuration using the other settings available below.

// @file "settings.json"

{
    // Font Family
    "editor.inlayHints.fontFamily": "/*NAME OF FONT FAMILY*/",

    // Font Size
    "editor.inlayHints.fontSize": 14, // <-- Set the font-size you want
    // Theme Colors Override
    "workbench.colorCustomizations": {
        // Overrides Theme Default Colors for InlayHints feature 
        "editorInlayHint.background": "#00001CCC",
        "editorInlayHint.foreground": "#99FFBBCC",

        // Overrides Theme Parameter hints fg for InlayHints feature
        "editorInlayHint.parameterBackground": "#00001CCC",
        "editorInlayHint.parameterForeground": "#99FFBBCC",

        // Overrides Theme Type hints fg for InlayHints feature
        "editorInlayHint.typeBackground": "#08000088",
        "editorInlayHint.typeForeground": "#DDEEFF88"
    },
}

---

Really its quite simple.

By being able to set the inlayHints font family to anything we want, we can achieve any sort of font style we want.