如何在 VS 代码侧边栏中更改字体大小？

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

  • 编辑窗格,
  • 建议小工具,
  • 降价预览,
  • 综合终端机综合终端机

如下图所示:

enter image description here

对 sidebar采取同样的做法，结果甚至更糟:

enter image description here

在编辑器窗格和侧边栏中使用不同大小的字体... 让我们解决这个问题: 不太好。我是不是找到了这个超棒工具最大的遗漏？

79404 次浏览
小开
最佳答案

This has been a 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 extension to load in a custom CSS file that modifies the sidebar styling if you're willing to experiment with it.

To get this working follow the Getting Started section in the extension details, then add URLs to your custom files to the "vscode_custom_css.imports": [""] array. (Note that on Windows mine looks like the following: "vscode_custom_css.imports": ["file:///C:\\dev\\vscode-styling.css"])

Below are before and after adding the CSS mentioned by @PSVapour in a later comment:

Original Modified

Note that this also affects the command palette font.

小开

Mihai Chelaru's answer presents a way to do more than just adjust the sidebar's font size. This, however, comes with a price of a bit of fiddling, possibly more than you'd be ready for, if the only thing you were interested in was the simple act of changing the sidebar's font size. So here's a simpler solution.

Just zoom the whole VS Code's UI in or out with CTRL++ or CTRL+- respectively and than adjust font sizes we do have control over in settings.json file, i.e.:

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

so everything matches. That's it.

小开

Just want to add to the discussion, If you set:

"window.zoomLevel": "your number",

In my case I started with zero, you can use that as sort of a baseline:

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

And then tweaked until I was happy.

E.g. you want to increase the sidebar font size keeping editor font size unchanged: set "window.zoomLevel": 0.5 and "editor.fontSize": 18. Look at the result. Play with both values to get the result you like.

Hope this helps!

小开

Apart from @Mihai Chelaru's answer, I found another plugin which helped me dealing with this issue. The name of the plugin is CustomizeUI.

CustomizeUI relies on the Monkey Patch Extension to inject custom javascript in VSCode. Here is the settings I use (in settings.json) for my Mac:

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

Again, this plugin is meant to do more than just changing the font size of the sidebar. But it has some minor advantages over Custom CSS and JS Loader. Like:

  • It won't show Unsupported on the title-bar or won't show any error message like Your installation is corrupted.

  • You do not have to reload settings every time VS Code is updated.

小开

Change the font size with keyboard shortcuts using the FontSize Shortcuts plugin. On a Mac, I am able to focus on the terminal or the editor and change the font size of those areas independently of each other. https://marketplace.visualstudio.com/items?itemName=fosshaas.fontsize-shortcuts

小开

You can zoom in and zoom out:

zoom in:

Ctrl + +

zoom out:

Ctrl + -


提交答案