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

Question

如何更改 VS Code 的“Inlay Hints”功能的字体样式？

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

这是一个例子：

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

我尝试了以下方法，但是，它不起作用......

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

我也尝试过添加editor.inlayHint范围，但尝试没有成功。

Answer 1

将字体样式设置为italic不可能。

\n

不过，并非一切都丢失了，有一个实际上效果很好的解决方法。

\n\n

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

\n

例如：

\n

如果我使用Cascadia Code作为字体，那么理论上 \xe2\x80\x94 \xe2\x80\x94 我可以使用以下配置：

\n

// @file "settings.json"\n\n{\n    "editor.inlayHints.fontFamily": "\'Cascadia Code Italic\'"\n}\n

\n

...但是，不幸的是，它不能以这种方式工作 \xe2\x80\x94或至少在这种情况下不能。不仅斜体变体不起作用，粗体变体和/或扩展变体（即“Inconsolata SemiExpanded”、“Inconsolata Bold”等）也不起作用。

\n
\n

在继续前进的过程中，我将陈述显而易见的事情：

\n

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

\n\n

那么我们该怎么办？

\n

那么我们可以使用设置字体系列"editor.inlayHints.fontFamily"。

\n

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

\n

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

\n\n

我的配置结果如下：

\n

\n
\n
\n

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

\n
\n

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

\n

\n

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

   \n
\n

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

   \n
\n

3. 使用下面可用的其他设置来批评字体配置。

   \n
\n

\n

// @file "settings.json"\n\n{\n    // Font Family\n    "editor.inlayHints.fontFamily": "/*NAME OF FONT FAMILY*/",\n\n    // Font Size\n    "editor.inlayHints.fontSize": 14, // <-- Set the font-size you want\n    // Theme Colors Override\n    "workbench.colorCustomizations": {\n        // Overrides Theme Default Colors for InlayHints feature \n        "editorInlayHint.background": "#00001CCC",\n        "editorInlayHint.foreground": "#99FFBBCC",\n\n        // Overrides Theme Parameter hints fg for InlayHints feature\n        "editorInlayHint.parameterBackground": "#00001CCC",\n        "editorInlayHint.parameterForeground": "#99FFBBCC",\n\n        // Overrides Theme Type hints fg for InlayHints feature\n        "editorInlayHint.typeBackground": "#08000088",\n        "editorInlayHint.typeForeground": "#DDEEFF88"\n    },\n}\n

\n\n

确实很简单。

\n

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

\n

Answer 2

没有人告诉你在哪里编辑这个，这让你很痛苦。

文件>首选项>设置，搜索颜色自定义，单击“在settings.json中编辑”

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