VSCode的多行选项卡

Question 1

我通常在每个编辑器窗口中打开10个以上的标签，这使得来回滚动（或使用ctrl + tab）查找所需的文件很麻烦。

有什么办法可以包裹标签吗？

类似于Atom的multirow-tabs。

更新：看起来它正在进行中。

Question 2

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

固定CSS的Tab关闭按钮

添加了CSS，用于较小的面包屑和acion-bar（在选项卡栏的右侧）

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

步骤1：安装扩展VSCode Custom 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 settings.json [Ctrl + Shift + P>“打开设置（JSON）”]，然后添加以下几行（以及custom.css文件的路径）：

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

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

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

Question 3

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

github.com/microsoft/vscode/issues/80510

我提出的解决方案肯定比将标签随意地包装到新行上需要更多的工作，但是作为回报，它使用户可以以提高生产率的方式组织标签。

Question 4

对于第二行选项卡有一些希望-尽管具有固定的选项卡，但听起来仍然很有用。请参见固定标签：在其他标签行的上方显示它们。已添加到待办事项列表。

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

Question 5

我只是玩过vscode开发人员工具控制台，如果将CSS与扩展结合使用，看起来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访问

扩展无法访问VS Code UI的DOM。您不能编写将自定义CSS应用于VS Code或将HTML元素添加到VS Code UI的扩展。

在VS Code中，我们一直在努力优化底层Web技术的使用，以提供始终可用的高响应性编辑器，并且随着这些技术和产品的发展，我们将继续调整对DOM的使用。为确保扩展不会干扰VS Code的稳定性和性能，并确保我们可以在不破坏现有扩展的情况下继续改进VS Code的DOM，我们在Extension Host进程中运行扩展，并防止直接访问DOM。

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