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

Question

在 User Settings window 中查询 fontsize 仅产生以下设置：

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

如下所示：

对 sidebar 做同样的事情会得到更差的结果：

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

Answer 1

这是一个 feature request for some time. The short answer is right now there's no VSCode setting that allows you to customize the sidebar font size. There is a hacky workaround solution proposed by @lindesvard in the same issue thread that involves using the 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之前和之后：

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

Answer 2

提供了一种不仅仅是调整边栏字体大小的方法。但是，如果您唯一感兴趣的是更改侧边栏字体大小。所以这里有一个更简单的解决方案。

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

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

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

Answer 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。看看结果。使用这两个值来获得您喜欢的结果。

希望对您有所帮助！

Answer 4

除了@Mihai Chelaru's answer, I found another plugin which helped me dealing with this issue. The name of the plugin is 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 有一些小的优势。喜欢：

它不会在 title-bar 上显示 Unsupported 或不会显示任何错误消息，如 Your installation is corrupted.
您不必在每次更新 VS Code 时都重新加载设置。

Answer 5

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

Answer 6

您可以放大和缩小:

放大:

Ctrl + +

缩小:

Ctrl + -

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

How to change font size in VS Code sidebar?

sidebar

font-size

visual-studio-code

vscode-settings