VSCode的多行选项卡

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

此外，根据您的颜色主题，请考虑修改以下设置：

"workbench.colorCustomizations": {

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

Run Code Online (Sandbox Code Playgroud)

来衬托每个标签的边框。

第二排选项卡有一些希望 - 尽管带有固定选项卡，但听起来仍然非常有用。请参阅固定选项卡：在其他选项卡上方的辅助选项卡行中显示它们。添加到积压。

顺便说一下，固定标签即将发布到 v1.46。有关其功能的更多信息： v1.46 发行说明：固定选项卡

Answer 3

mat*_*tar 11

更新： 1.53 版包括换行标签！

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

或者，您可以将以下内容粘贴到 settings.json 中： "workbench.editor.wrapTabs": true

Answer 4

Abh*_*hek 6

我对visual-studio-code中的多行选项卡执行以下操作（直到获得官方支持或更简单的解决方案为止）：

步骤1：安装扩展VSCode Custom CSS。（请查看扩展页面以获取正确的安装说明。由于VSCode不正式支持更改内部CSS，因此有点hacking。）

步骤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;
}

Run Code Online (Sandbox Code Playgroud)

步骤3：将扩展名指向您的自定义CSS。打开VSCode settings.json [Ctrl + Shift + P>“打开设置（JSON）”]，然后添加以下几行（以及custom.css文件的路径）：

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

Run Code Online (Sandbox Code Playgroud)

步骤4：确保已阅读VSCode Custom CSS扩展的自述文件并正确启用了它。您可能必须重新加载VSCode。另外，根据您的喜好编辑CSS。

评论：此解决方案（链接到扩展名和CSS，用于将标签栏包装成多行）最初是由Steven Laidlaw在此Github线程中发布的。我只是将CSS扩展为较小的选项卡。

干得好伙计。但我不能证明所有这些工作都是为了这个。MSFT 应该听取他们的开发人员的意见，这样就不会发生这种情况。 (9认同)
很高兴你发布了这个黑客。Microsoft 需要向 Visual Studio Code 添加多行功能。关于插件的这些评论让我相信这个解决方案很脆弱：“注意：每次更新 Visual Studio Code 后，请重新启用自定义 CSS。注意：每次更改配置时，请重新启用自定义 CSS。” (2认同)

Answer 5

小智 5

由于 VSCode 尚未正式支持多行选项卡，因此我想提请您注意我刚刚在其 github 上发布的功能请求。我建议不要总是将选项卡包装到新行，而是将它们放置在彼此完全独立的行上。用户决定，他们可以将短行与仍需要滚动的长行混合。请参阅此处的详细信息：

github.com/microsoft/vscode/issues/80510

我提出的解决方案当然需要比毫不客气地将选项卡包装到新行更多的工作，但作为回报，它允许用户以可以提高生产力的方式组织他们的选项卡。

归档时间：	8 年，10 月前
查看次数：	9106 次
最近记录：	6 年，4 月前