配置 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",
    },
}