VS Code 自定义侧边栏答案

【问题标题】：VS Code customize sidebarVS Code 自定义侧边栏
【发布时间】：2016-03-03 14:29:28
【问题描述】：

有没有办法在 VS Code 中自定义侧边栏？特别是，我想更改字体大小。有用户设置吗？或者，也许我可以通过样式表以某种方式对其进行编辑，因为它是一个 Electron 应用程序，就像在 Atom 中一样？

【问题讨论】：

仅供参考，⌘-+ 和 ⌘-- 在 VSCode 中工作，类似于浏览器。（这不是您问题的答案，但它以类似的方式很有用。）
如果手动重置编辑器用户配置文件上的 window.zoomLevel，也许可以尝试安装Monkey Patch。它是一个 VSCode 插件，可让您将自定义 css 代码注入您的 VSCode IDE

标签： visual-studio-code

【解决方案1】：

vscode 没有用户定义的样式表。

目前缩放 UI 各个部分的唯一方法是通过整体缩放级别 (window.zoomLevel) 和编辑器的字体大小 (editor.fontSize)。

我 created a feature request 在 repo 上为此。

正如其他答案中提到的，有允许注入自定义 CSS 的扩展，您应该小心使用这些扩展，因为它们直接操纵 VS Code 的源代码，这可能会导致其他地方出现问题，并且任何修改都可能在您更新时中断。

【讨论】：

【解决方案2】：

虽然没有直接的方法将侧边栏从settings 自定义为@Daniel Imms mentioned in his answer，但我找到了2 个有助于解决此问题的插件。如果你愿意，你可以选择其中任何一个。

1。自定义 CSS 和 JS 加载器

在Custom CSS and JS Loader 插件中，您需要创建一个自定义css，然后该插件将直接将该代码注入electron-browser/index.html（因为VS Code 是一个基于电子的编辑器）。我在我的 Mac 中使用这个 CSS：

".explorer-viewlet .mac": "font-size: 1.2em !important",

2。自定义UI

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

【讨论】：

使用 CustomizeUI，有没有办法增加侧边栏中 everything 的字体大小？我在linux上。我正在使用 Gruntfuggly.calendar 扩展，并希望增加它的字体大小，无论是独立还是更新全部。
我使用此设置"customizeUI.stylesheet":{".monaco-icon-label" : "font-size: 15px;"} 来增加侧边栏上的字体 + 顶部的所有位置和所有标签
谢谢。我想知道你是怎么想出来的。例如，您从哪里了解到“monaco-icon-label”。是否有我可以自己研究的设置/配置文件？
vscode 有一个检查元素的选项。转到设置>切换开发者工具

【解决方案3】：

我发现使用常规缩放设置非常有效（它位于那个巨大的设置窗口中）。这会调整整个应用的缩放级别。调整它直到您喜欢浏览器窗口的大小，然后调整可设置的编辑器字体以在该缩放级别下可读。我三个 80 列的并行代码窗口加上一个好的 17" 笔记本电脑显示器上的资源管理器，如果您对 8pt 代码字体没问题（实际上是 11 点字体缩小了两个凹口），则可读。

【讨论】：

【解决方案4】：

我找到了改变 Visual Studio Code Window 字体的方法。

首先，打开命令 Pallete，然后输入“Toggle Developer Tools”
这将打开“Chrome Inspector”。
选择应用侧边栏的任意文本。
在右侧检查器的“样式”选项卡中搜索.monaco-shell 类（显示当前文档的所有样式），然后搜索font-family 属性。This is tab and stylesheets.
在workbrench.main.css中点击右键并点击“打开Soruce面板”Show like this
用这个icon格式化css代码。
ctrl+f 再次找到 font-family 属性，因为格式重定向到 css 文档的末尾，并在 ~6371 行中得到 .monaco-shell 类，如 this。
更改此字体（我已更改为 Droid sans Mono 字体），但您可以更改为您想要的。

为什么我在真实文档css中没有变化

'原因，当我更改了真实文档 css 中的字体系列（ C:\Users\${user}\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench \workbrench.main.css) 生成错误提示“Vscode 有错误，请重新安装程序”或类似内容
生成应用程序时，声明的字体家族将被删除，文档css不是漂亮的代码。

这个过程改变了visual studio code应用程序的所有字体（不包括编辑器字体）

【讨论】：