配置 VS Code 的 inlay-hints 的字体样式

Question

如何更改 VS Code 的“嵌入提示”功能的字体样式？

我试图寻找答案，但只能找到如何更改颜色，而不是样式。

这是一个例子：

我希望下图中的target词呈现为斜体。

我尝试了以下，但是，它没有用......

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

我也尝试将editor.inlayHint添加到 scope，但没有成功。

Answer 1

无法将字体样式设置为italic 。

不过，并非所有内容都丢失了，有一种解决方法实际上效果很好。

---

如上所述，无法将字体样式设置为斜体。 但是，有一种解决方法，而且效果非常好。 在我解释解决方法之前，我认为重要的是要注意我尝试使用的第一个解决方案是将字体设置为斜体变体，不幸的是，将"editor.inlayHints.fontFamily"设置为字体的斜体变体是这样的VS Code 似乎不允许。 我在许多其他情况下都看到了这一点。 这个想法是，因为你不能这样做"fontStyle": "italic" ，你只需将字体更改为斜体版本。

例如：

如果我使用Cascadia Code作为我的字体，那么——理论上——我可以只使用以下配置：

// @file "settings.json"

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

...但是，不幸的是，它不能那样工作——或者至少在这种情况下不能。 不仅斜体变体不起作用，粗体变体和/或扩展变体（即“Inconsolata SemiExpanded”、“Inconsolata Bold”等）也不起作用。

在前进的同时，我将 state 显而易见：

没有"editor.inlayHints.fontStyle"设置。

---

那么我们该怎么办？

好吧，我们可以使用"editor.inlayHints.fontFamily"设置字体系列。

我们可以设置字体，但不能设置字体的样式，这有点令人惊讶。 我不确定他们为什么以这种方式设计它，但很明显，他们构建了具有特定约束的功能，原因超出了我的范围（阅读 GitHub 上的功能开发提要可能会帮助任何想了解更多关于该功能为何起作用的人它是怎么做的）。 尽管如此，我们有一个高度可定制的设置，它实际上比我们建立的设置（不存在） editor.inlayHints.font给了我们更多的控制权。

我个人所做的，看起来很酷的，是我找到了一种非等宽的手写字体样式——通常来自谷歌 Fonts——我将它分配给字体系列。 我花了一段时间才找到一些有效的 fonts。 任何曾经使用过 fonts 并试图找到最适合他们编写代码的字体的人都会知道：选择在编辑器内（或代码内）任何地方使用的 fonts 都需要仔细检查，而且需要更长的时间您编写的代码越多，您获得的设置就越多，因此这实际上可能是一个耗时的配置设置。 我花了一个小时来确定一种字体，然后我决定使用“Sriracha”字体系列。 Siracha 在外观上是倾斜的（看起来是斜体），它在编辑器中可读，它在编辑器中呈现良好（并非所有 fonts 都会这样做），并且它比我使用的字体的标准粗细略粗，即 Cascadia Code .

---

我的配置导致以下外观：

更改字体系列时，还有一些其他设置有助于配置此功能。

因此，换句话说，只需执行以下操作：

1. 从Google Fonts 、 Font Squirrel或其他您喜欢的字体源下载斜体和/或粗体字体。

2. 使用"editor.inlayHints.fontFamily"设置字体系列。

3. 使用下面可用的其他设置来评价 fonts 配置。

// @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"
    },
}

---

真的很简单。

通过能够将 inlayHints 字体系列设置为我们想要的任何字体，我们可以实现我们想要的任何字体样式。

Answer 2

在settings.json你需要一行

 "editor.inlayHints.fontFamily": "'Myfontitalic'",

现在，似乎vscode在读取带有非字母数字字符的字体名称时遇到了一些麻烦，例如，如果斜体版本是“Myfont-Italic”或“Myfont Italic”。

一种解决方案是复制字体并将其重命名为新名称，如“Myfontitalic”，不带空格或其他字符。

我所做的是针对 Ubuntu 但同样的想法应该适用于任何 Linux，可能还有 Windows，使用其他工具（fontforge？）

• apt install fonttools font-manager以获取ttx更改字体信息的实用程序（font-manager 也很有用）
• 使用搜索、字体管理器、字体查看器...来查找字体的位置（通常是/usr/share/fonts/...或~/.local/share/fonts ）
• 在某处（家）复制一个新版本， cp ~/.local/share/fonts/Myfont-Italic.otf ~/temp.otf并cd到 go 家
• 转换为 XML 将ttx temp.otf复制为temp.ttx
• 编辑temp.ttx ( vi , ...)，并将所有“Myfont-Italic”、“Myfont Italic”...（相关名称）更改为唯一的“Myfontitalic”名称，保存。
• 使用ttx temp.ttx转换回 otf (...)（如果它是 otf 文件则创建Myfontitalic.otf ）

要（本地）安装新字体，请在文件资源管理器 ( ~/Myfontitalic.otf ) 中双击它或使用工具。 重新启动font-manager ，新字体应该是可见的。

重新启动vscode并在settings.json中添加上面的行。

Answer 3

在 Mac 上找到这样的字体变体名称：

1. 打开“字体书”应用程序
2. 展开所需的字体和 select 变体。
3. 单击字体册工具栏上的 (i) 图标。
4. 在 VS Code 中使用PostScript Name名称——例如"editor.inlayHints.fontFamily": "DankMono-Italic"

Answer 4

没有人告诉您在哪里编辑它，这让您很头疼。

File>Preferences>Settings，搜索color customizations，点击“Edit in settings.json”

{
    "workbench.colorCustomizations": {
      "editorInlayHint.background": "#00000000",
      "editorInlayHint.foreground": "#666666FF",
    },
}