限制

Question

我通常每个编辑器窗口打开10个以上的标签，这使得来回滚动（或使用ctrl + tab）来查找我想要的文件变得很繁琐。

有没有办法让tabs换行？

更新：看起来这是progress中的作品。

Answer 1

那＆＃34;正在进行中＆＃34;提供的链接是指Visual Studio IDE，它与VSCode分开。我在这个问题上看到的最新消息是found on the VSCode project's Github page，它基本上表示它不是2018年的计划功能并且关闭了这个问题。

我不喜欢按Ctrl + Tab或滚动标签菜单;到目前为止我遇到的唯一其他选择是use the "Open Editors" list：

没有标签，文件资源管理器的OPEN EDITORS部分是一种快速的文件导航方式。

这需要使用鼠标，但这样就可以利用多行标签布局。您可以调整它的大小以提供更多空间，并根据需要重新排序选项卡。

Answer 2

更新： 1.53 版包含 wrap tabs！

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

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

Answer 3

我对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;
}

第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 Custom CSS扩展程序的自述文件并正确启用了它。您可能必须重新加载VSCode。另外，根据您的喜好编辑CSS。

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

Answer 4

第二行选项卡有一些希望-尽管带有固定的选项卡，但听起来仍然很有用。参见Pinned tabs: show them in a secondary tab row above others。已添加到待办事项中。

顺便说一句，固定标签即将发布到v1.46。有关其功能的更多信息：v1.46 release notes: pinned tabs

Answer 5

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

github.com/microsoft/vscode/issues/80510

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

Answer 6

我刚刚使用过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文件中以在应用程序更新之前使用它。

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

限制

我们对扩展程序施加了某些限制。   这是限制条件及其用途。

没有DOM访问权限

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

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

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

VSCode的多行选项卡

6 个答案:

限制

没有DOM访问权限