如何更改 vscode 侧边栏字体系列

Question

如何更改边栏中所有文本的字体系列？

我不喜欢默认字体，并且在settings.json中没有发现任何关于侧边栏字体系列的信息。

Answer 1

1.一种选择

这显然目前在 VS Code 中没有原生支持。 但是，有扩展。 其中之一是： 自定义 CSS 和 JS Loader ，我在这个答案的帮助下找到了它们。

找到要更改的 CSS class 并不是一件容易的事——下面的例子来自这个评论——我不确定你会想要改变。 但是，例如，如果您想更改资源管理器的字体，您可以使用 — 如果您想复制下面的示例，请先安装 Fira 代码ipsis litteris —：

.explorer-viewlet { 
  font-family: "Fira Code"; 
  font-weight: bold; 
}

2.按照扩展的说明

无论如何，您还需要非常仔细地遵循每个安装步骤：

1. 安装此扩展程序。
2. 添加到 settings.json：

    "vscode_custom_css.imports": [""], "vscode_custom_css.policy": true,

   非常重要：vscode_custom_css.imports 中的项目必须是 URL。 普通文件路径不是 URL。 Windows 文件 URL 示例： file:///C:/Users/MyUserName/Documents/custom.css 。 C:/零件是必需的。 MacOS 和 Linux 文件 URL 示例： file:///Users/MyUserName/Documents/custom.css 8CBA22E28EB17B5F5C6AE2A266AZ 。
3. 使用适当的权限重新启动 VS Code 以修改自身：
4. Windows：以管理员权限重新启动。 MacOS 和 Linux：请参阅下面的说明。
5. 激活命令“重新加载自定义 CSS 和 JS”。
6. 重新开始。

Answer 2

只是想添加到已接受的答案中。

.explorer-viewlet class 仅针对侧边栏中的资源管理器视图，但如果您想针对侧边栏中的其他视图，例如源代码管理、扩展、查找等。您可以使用更通用的 class，例如以下代码段：

.split-view-view > .sidebar > .content > .viewlet{
   font-family: "Victor Mono" !important;
}

此外，如果您想定位 viewlet 的 header，您可以使用以下内容：

.split-view-view>.sidebar> .title > .title-label > h2 {
    font-family: "Victor Mono" !important;
    font-weight: bold;
    font-size: 14px;
    font-style: italic;
 }

哦，如果您想知道如何找到这些类名，您可以按F1 （Command）键并输入Toggle Developer tools ，您可以像在任何其他网站上一样进行检查。

你可以 go 超级疯狂的是（但就像扩展所说的你应该非常小心。！）。