用于 VSCode 的多行选项卡

小开

我刚刚使用了 vscode 开发工具控制台，看起来这个 CSS 如果加上一个扩展就足够了:

.tabs-and-actions-container .monaco-scrollable-element {
height: auto;
}
.tabs-and-actions-container .monaco-scrollable-element .tabs-container {
flex-wrap: wrap; flex: 1 1 auto;
height: auto;
}

您可以将此代码添加到 file:///C:/Users/[username]/AppData/Local/Programs/Microsoft%20VS%20Code/resources/app/out/vs/workbench/workbench.main.css文件中，以便在应用程序更新之前使用它。

注意: 当您将此信息添加到 workbench.main.css文件时，VSCode 将警告 VScode 的完整性已损坏，请忽略该消息。VSCode 将像以前一样工作，因为它是一个 CSS 更改(如果任何 javascript 没有使用标签的某些位置，或其他东西)。

否则，正如@Bene 所说，这是 VSCode 开发团队的一个禁区。他们说:

限制

我们对延期有一定的限制。下面是这些限制及其目的。

无 DOM 访问

扩展不能访问 VSCodeUI 的 DOM 无法编写将自定义 CSS 应用于 VS 代码或添加一个 HTML 元素到 VS 代码用户界面。

在 VS 代码中，我们不断尝试优化底层的使用网络技术，以提供一个始终可用，高度响应编辑器，我们将继续调整我们对 DOM 的使用技术和我们的产品发展。以确保扩展不能干扰 VS 代码的稳定性和性能，而且我们可以继续改进 VS 代码的 DOM 而不破坏现有的扩展，我们在扩展主机进程中运行扩展并防止直接访问 DOM。

@ https://code.visualstudio.com/api/extension-capabilities/overview#no-dom-access

小开

2021年2月更新: 在 VSCode v1.53.0 + 中内置对制表符包装的支持

只需在设置中将 workbench.editor.wrapTabs设置为 true。

我仍然使用下面提到的配置来根据我的使用使标签变得更小。

VSCode v1.43.2于2020年3月28日更新

修正了标签关闭按钮的 CSS

增加了小面包屑和活动条的 CSS (在标签栏的右边)

我在 Visual-Studio-code 中对多行选项卡执行以下操作(直到有官方支持或更简单的解决方案) :

步骤1: 安装扩展自定义 CSS。(查看扩展页了解正确的安装说明。由于 VSCode 不正式支持修改内部 CSS，所以这有点像黑客技术。)

步骤2: 创建一个 CSS 文件(比如 ”/home/user/vscode/custom.css)并添加以下内容:

/* Following CSS to wrap the tab-bar into multiple rows: */


.tabs-and-actions-container > .monaco-scrollable-element {
height: auto !important;
}


.tabs-and-actions-container > .monaco-scrollable-element > .tabs-container {
height: auto !important;
flex-wrap: wrap;
}




/* Following CSS to make the tabs thinner/smaller (so that they take lesser vertical space): */


.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab {
height: 25px;
padding-left: 4px;
font-size: 0.8em;  /* smaller font-size for tab icons and label */
}


.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .label-name {
font-size: inherit !important;  /* inherit updated font-size for label */
}




/* Following CSS for smaller close button on tabs: */


.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-close {
width: 20px;
}


.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-close .action-label {
height: 12px;
width: 12px;
background-size: 12px;
}


.monaco-workbench .part.editor>.content .editor-group-container.active>.title .tabs-container>.tab>.tab-close .action-label.codicon {
font-size: 12px;
}




/* OPTIONAL: Following CSS for smaller breadcrumbs (below tab-bar) */


.monaco-breadcrumbs {
font-size:0.65em;
opacity: 0.8;
height:18px !important;
}
.tabs-breadcrumbs .breadcrumbs-control {
height: 18px !important;
}
.monaco-workbench .symbol-icon.block {
height: 8px;
width: 8px;
min-height: 8px;
min-width: 14px;
background-position: 50%;
background-size: contain;
}
.breadcrumbs-control .monaco-breadcrumb-item:before {
min-width: 12px !important;
height: 12px !important;
background-size: contain !important;
}




/* OPTIONAL: Following CSS for smaller action-bar (beside the tab-bar) with menu, split, etc. */


.monaco-workbench .part.editor>.content .editor-group-container>.title .editor-actions {
height: 20px;
padding:0;
}
.monaco-workbench .part.editor>.content .editor-group-container>.title .editor-actions .action-label, .monaco-workbench .part.editor>.content .editor-group-container>.title .title-actions .action-label {
height: 20px;
line-height: 20px;
min-width: 14px;
background-size: 8px;
}


.tabs-and-actions-container > .editor-actions > .monaco-toolbar > .monaco-action-bar > .actions-container {
max-width:60px;
flex-wrap:wrap;
}

步骤3: 将扩展指向自定义 CSS。打开 VSCode 设置 json [ Ctrl + Shift + P > “ Open Settings (JSON)”]并添加以下代码行(通过您的 custom.css 文件路径) :

"vscode_custom_css.imports": [
"file:///home/user/vscode/custom.css"
],
"vscode_custom_css.policy": true

步骤4: 确保您已经完成了自定义 CSS扩展的自述文件并正确地启用了它。您可能需要重新加载 VSCode。另外，根据您的喜好编辑 CSS！

信息来源: 这个解决方案(链接到扩展和 CSS 将 tab-bar 包装成多行)最初是由 Steven Laidlaw在这个 Github 线中发布的。我只是将 CSS 扩展为更小的选项卡。

小开

由于 VSCode 中还没有正式支持多行标签，我想提请你们注意我刚刚在他们的 github 上发布的一个特性请求。与其总是将制表符包装到一个新行，我建议将它们布局在彼此完全独立的行上。用户决定，他们可以混合仍然需要滚动的短行和长行。点击这里查看详情:

Github.com/microsoft/vscode/issues/80510

我提出的解决方案当然需要更多的工作，而不是随意地将选项卡包装到一个新行，但作为回报，它让用户可以以一种可以提高生产力的方式来组织他们的选项卡。

小开

在这个问题上允许选项卡换行为多行已经取得了显著的进步，这个特性现在已经在内部人员的 Build 中(可能在 v1.53稳定版中，因为它在我的测试中工作得很好) :

正如在演示中看到的，您甚至可以将标签页从一行拖到另一行。目前没有对行数的限制，直到编辑器本身变得太小。

启用此功能

workbench.editor.wrapTabs: true或

设置 GUI 中的 Workbench > Editor: Wrap Tabs。

来自测试标签包装的一些注释:

确保您已经配置了 workbench.editor.tabSizing: fit(这将使最后一个选项卡填充整个行，以便在选项卡换行时看起来更加均匀)[ ed ]。注意: 你仍然可以使用 shrink，它只是看起来不那么好]
如果编辑器或编辑器工具栏的空间变得太小，则自动关闭包装，并在大小变大时再次打开
您仍然可以拖放标签，即使它们已经包装
你仍然可以固定一个标签，它显示在标签的开头
当选项卡换行时，tab.orders 颜色不仅应用于每个选项卡的右侧，而且应用于下面，以便将选项卡彼此分开

此外，根据您的颜色主题，考虑修改这些设置:

"workbench.colorCustomizations": {


"tab.border": "#fff6",
"titleBar.border": "#fff6",
"editorGroupHeader.tabsBorder": "#647c64",
}

设置每个选项卡的边框。

第二行标签还是有希望的——虽然有固定的标签，但听起来还是很有用。参见固定选项卡: 将它们显示在其他选项卡之上的第二个选项卡行中。添加到待办事项。

顺便说一下，固定标签即将升级到1.46版本。更多关于它们的功能: 1.46版本说明: 固定标签

小开

更新: 版本1.53包括包装标签！

新的“ Wrap Tabs”设置是 File > Preferences > Settings > Workbench > Editor Management下的复选框。

或者，可以将以下内容设置为粘贴到 setings.json: "workbench.editor.wrapTabs": true

小开

我已经找到/开发了一个解决方案，可以在自己的行中显示固定的选项卡。.它是一个人们可能已经在使用的加法，而不是这个线程本身的答案。

关于 Github的原始答复: https://github.com/microsoft/vscode/issues/98160#issuecomment-989276052

vscode v1.62.3
扩展: Custom CSS and JS Loader v6.0.2

settings.json

{
"workbench.editor.wrapTabs": true,


"git.decorations.enabled": false,
"workbench.editor.decorations.badges": false,
"workbench.editor.decorations.colors": false,


"vscode_custom_css.imports": ["file:///C:/temp/VScode/custom.css"],
"vscode_custom_css.policy": true
}

附言。在上面的配置中，我还禁用了一些来自选项卡的 git内容，使它们更具可读性。.不确定是否会影响其他地方，小心使用。

custom.css

.tabs-container {
display: flex !important;
flex-wrap: wrap !important;
height: auto !important;
}


.tabs-container::before,
.tabs-container::after {
content: "" !important;
width: 100% !important;
order: 1 !important;
}


.tab {
display: flex !important;
}


.tab:not(.sticky) {
order: 1 !important;
}

结果(gif) :