如何更改 VS Code 侧边栏中的字体大小？

Posted 2023-03-06

【中文标题】如何更改 VS Code 侧边栏中的字体大小？

【英文标题】：How to change font size in VS Code sidebar?

【发布时间】：2018-12-29 14:11:30

【问题描述】：

在User Settings 窗口中查询fontsize 只会产生以下设置：

编辑器窗格， 建议小部件， markdown 预览， 综合终端

如下所示：

对sidebar 执行相同操作会得到更差的结果：

在编辑器窗格和侧边栏看起来有不同大小的字体......让我们解决：不太好。我刚刚发现这个很棒的工具最大的遗漏了吗？

【参考方案1】：

您可以放大和缩小：

放大：

Ctrl + +

缩小：

Ctrl + -

【参考方案2】：

使用 FontSize Shortcuts 通过键盘快捷键更改字体大小 插入。在 Mac 上，我可以专注于终端或编辑器，并独立更改这些区域的字体大小。 https://marketplace.visualstudio.com/items?itemName=fosshaas.fontsize-shortcuts

【参考方案3】：

只是想加入讨论，如果你设置：

"window.zoomLevel": "your number",

在我的例子中，我从零开始，您可以将其用作基线：

"editor.fontSize": 14,
"editor.tabSize": 2,
"terminal.integrated.fontSize": 14,
"window.zoomLevel": 0,
"[Log]": 
  "editor.fontSize": 14
,

然后调整直到我满意为止。

例如你想增加侧边栏字体大小保持编辑器字体大小不变：设置"window.zoomLevel": 0.5和"editor.fontSize": 18。看看结果。使用这两个值来获得你喜欢的结果。

希望这会有所帮助！

【讨论】：

这很愚蠢，但这绝对是最快和最容易推理的答案。谢谢。

这个答案唯一缺少的是在哪里可以找到设置文件。我可以通过以下方式设置缩放级别：Sidebar > Manage > Settings > Window > Zoom Level。然后Text Editor > Font > Font Size

@B2K 你好！如果您转到Code > Preferences > Settings，您将转到设置的 GUI/窗格，然后转到右上角，您将看到三个图标，单击第一个（从左侧开始），它将带您到settings.json 文件。

或者你可以直接点击⌘=进行缩放，然后调整字体。

zoomLevel 是杀手。

【参考方案4】：

除了@Mihai Chelaru's answer，我发现另一个插件可以帮助我处理这个问题。插件名称为CustomizeUI。

CustomizeUI 依赖 Monkey Patch Extension 在 VSCode 中注入自定义 javascript。这是我为我的 Mac 使用的设置（settings.json）：

"customizeUI.stylesheet": 
    ".explorer-viewlet .mac": "font-size: 1.2em !important; overflow: auto; border-left:none!important",
,

同样，这个插件的目的不仅仅是改变侧边栏的字体大小。但它比 Custom CSS 和 JS Loader 有一些小的优势。喜欢：

它不会在标题栏上显示Unsupported，也不会显示任何错误消息，例如Your installation is corrupted。

您不必在每次更新 VS Code 时重新加载设置。

【讨论】：

这是最好的答案。这是最简单的。它也不会增加图标栏的大小，也不会增加顶部栏。这样我就不会失去空间。谢谢。

【参考方案5】：

Mihai Chelaru's answer 提供了一种不仅仅是调整侧边栏字体大小的方法。但是，如果您唯一感兴趣的只是更改侧边栏字体大小的简单操作，那么这会带来有点摆弄的代价，可能超出您的准备程度。所以这里有一个更简单的解决方案。

只需分别使用 CTRL++ 或 CTRL+- 放大或缩小整个 VS Code 的 UI而不是调整字体大小，我们确实可以在settings.json 文件中控制，即：

editor.fontSize, editor.suggestFontSize, markdown.preview.fontSize, terminal.integrated.fontSize

所以一切都匹配。就是这样。

【讨论】：

我也是这样做的。但是，侧边栏的字体变成 10 或 12，而不是我喜欢的 11。所以我将编辑器和终端字体大小设置为 13，缩小 1。编辑器变为 11，侧边栏变为 10。我现在可以忍受。

【参考方案6】：

这是feature request 已有一段时间了。简短的回答是现在没有允许您自定义侧边栏字体大小的 VSCode 设置。 @lindesvard in the same issue thread 提出了一个 hacky 解决方案，其中涉及使用 Custom CSS and JS Loader 扩展加载自定义 CSS 文件，如果您愿意尝试它，该文件会修改侧边栏样式。

要使其正常工作，请遵循扩展详细信息中的入门部分，然后将自定义文件的 URL 添加到 "vscode_custom_css.imports": [""] 数组。 （请注意，在 Windows 上，我的如下所示："vscode_custom_css.imports": ["file:///C:\\dev\\vscode-styling.css"]）

下面是添加@PSVapour in a later comment提到的CSS之前和之后：

请注意，这也会影响命令调色板字体。

【讨论】：

好答案。我只会补充一点，还有一个更简单的解决方法，即使用CTRL+- 缩小以使所有字体更小，然后相应地调整我们可以控制的字体。然而，这也有缩小其他 UI 元素（如编辑器窗格的选项卡）的缺点。它适合我，但你的里程可能会有所不同。

是的，这确实是一个更简单的选择。也许您可以将其发布为答案以使其更具知名度。

我遵循marketplace.visualstudio.com/… 中提到的每个位，并将以下内容复制并粘贴到自定义 css 文件中，但它不起作用 ..monaco-tree-row.has-children font-weight: 500 ;边距：8px；颜色：#eee；字体大小：14px； .monaco-tree-row 字体粗细：300；边距：5px；字体大小：12px；颜色：#bbb；