VSCode：更改固定选项卡 - 使字体更小或增加选项卡宽度答案

【问题标题】：VSCode: Altering pinned tabs - either make the font smaller or increase tab widthVSCode：更改固定选项卡 - 使字体更小或增加选项卡宽度
【发布时间】：2022-01-17 01:12:40
【问题描述】：

我正在使用自定义 CSS 加载器，一切都已设置完毕。

我可以更改 VSCode 的 CSS 并进行更改。但由于某种原因，我唯一无法更改的是选项卡中的文本。

当我只为选项卡设置字体大小时，我可以更改图标大小。但它对文本大小没有影响。

我已经尝试增加标签的宽度，但没有成功。

我只能猜测 .tab-container 和 .tab 的作用。

这是我要更改的内容：

这是我在 VSCode 的问题中从某人的建议中窃取的 CSS 代码：

:root {
    --size-reduction: 12px;
}

.monaco-shell {
  font-family: "JetBrains Mono", "Monoco", monospace;
}

.tabs-container .tab,
.tabs-container .monaco-icon-label,
.tabs-container .monaco-icon-label::before,
.tabs-and-actions-container .editor-actions {
    height: unset !important;
}

.monaco-workbench .tabs-container .tab * {
  font-size: 0.5em;
  width: 100px;
}

.editor-instance > .monaco-editor,
.editor-instance > .monaco-editor .overflow-guard,
.editor-instance > .monaco-editor .monaco-scrollable-element {
    height: 100% !important;
}

.editor-instance,
.editor-instance > .settings-editor .settings-toc-wrapper,
.editor-instance > .settings-editor .settings-editor-tree {
    height: calc(100% + var(--size-reduction)) !important;
}

.editor-instance > .settings-editor {
    height: calc(100% - var(--size-reduction)) !important;
}

有人可以分解每个元素（.tab、.tab-container 等）或指出一个可以分解所有元素的来源吗？

另外，如果我调整标签内的字体大小，为什么标签的字体没有缩小？

我的固定标签大小设置为“缩小”。我尝试将它从 Compact 和 Norman 更改为字体大小没有区别。

我的常规字体是编辑器的“Jetbrains Mono”。

【问题讨论】：

标签： visual-studio-code vscode-settings

【解决方案1】：

承认这个答案没有回答我最初的询问“改变宽度或字体大小的收缩固定标签。”

但是没有使用 CSS-Custom-Loader 和摆弄粘胶的 css，我找到了一个使用 UI 设置的更优雅的解决方案。

要注意的三个设置：

固定标签大小：正常
Workbench > 编辑器：显示选项卡选中
Workbench > 编辑器：选项卡大小缩小

现在我将一次固定 8 到 10 个标签。因此，这将适合工作空间中的整洁。

如果我有 30 个固定标签，我不知道它是否足以产生影响。

【讨论】：