Visual studio code VSCode的多行选项卡

我通常在每个编辑器窗口中打开10多个选项卡，这使得来回滚动（或使用ctrl+tab）来查找所需文件非常繁琐

有没有办法把包裹包起来

类似于原子的

---

更新：看起来像是一个工作区。

我刚刚玩过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访问权限 扩展无法访问VS代码UI的DOM。你 无法编写将自定义CSS应用于VS代码或添加的扩展 VS代码UI的HTML元素

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

@

2021年2月更新：VSCode v1.53.0+中内置的标签包装支持

• 只需在设置中将

  workbench.editor.wrapTabs设置为
  true

• 我仍然使用下面提到的配置，根据使用情况缩小选项卡

---

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

• 修复了标签关闭按钮的CSS
• 添加了小面包屑和acion条的CSS（在选项卡栏的右侧）

我在visual studio代码中对多行选项卡执行以下操作（直到有官方支持或更简单的解决方案）：

步骤1:安装扩展插件。（查看扩展页以获得正确的安装说明。这有点像黑客，因为VSCode不支持修改内部CSS。）

步骤2:创建一个CSS文件（例如，“/home/user/vscode/custom.CSS”），并添加以下内容：

/*使用CSS将选项卡栏包装成多行：*/
.tabs和actions容器>.monaco可滚动元素{
高度：自动！重要；
}
.tabs和actions容器>.monaco可滚动元素>.tabs容器{
高度：自动！重要；
柔性包装：包装；
}
/*使用CSS使选项卡更薄/更小（从而减少垂直空间）：*/
.monaco工作台.part.editor>.content.editor组容器>.title.tabs容器>.tab{
高度：25px；
左侧填充：4px；
字体大小：0.8em；/*标签图标和标签的较小字体大小*/
}
.monaco workbench.part.editor>.content.editor组容器>.title.tabs容器>.tab.label名称{
字体大小：继承！重要；/*继承标签的更新字体大小*/
}
/*以下CSS用于选项卡上较小的关闭按钮：*/
.monaco工作台.part.editor>.content.editor组容器>.title.tabs容器>.tab>.tab关闭{
宽度：20px；
}
.monaco workbench.part.editor>.content.editor组容器>.title.tabs容器>.tab>.tab关闭.action标签{
高度：12px；
宽度：12px；
背景尺寸：12px；
}
.monaco workbench.part.editor>.content.editor组container.active>.title.tabs container>.tab>.tab close.action-label.codicon{
字体大小：12px；
}
/*可选：以下CSS用于较小的面包屑（选项卡栏下方）*/
摩纳哥面包屑{
字号：0.65em；
不透明度：0.8；
高度：18px！重要；
}
.tabs breadcrumbs.breadcrumbs控件{
高度：18px！重要；
}
.monaco workbench.symbol-icon.block{
高度：8px；
宽度：8px；
最小高度：8px；
最小宽度：14px；
背景职位：50%；
背景尺寸：包含；
}
.面包屑控制。摩纳哥面包屑项目：之前{
最小宽度：12px！重要；
高度：12px！重要；
背景尺寸：包含！重要；
}
/*可选：以下CSS用于较小的操作栏（选项卡栏旁边），带有菜单、拆分等*/
.monaco工作台.part.editor>.content.editor组容器>.title.editor操作{
高度：20px；
填充：0；
}
.monaco工作台.part.editor>.content.editor组容器>.title.editor操作.action标签，.monaco工作台.part.editor>.content.editor组容器>.title.title操作.action标签{
高度：20px；
线高：20px；
最小宽度：14px；
背景尺寸：8px；
}
.tabs和操作容器>.editor actions>.monaco工具栏>.monaco操作栏>.actions容器{
最大宽度：60px；
柔性包装：包装；
}

由于VSCode中仍然不支持多行选项卡，我想提请您注意我刚刚发布在他们github上的功能请求。 我建议将标签放置在完全独立的行上，而不是总是将标签包装到新行。用户决定，他们可以将仍然需要滚动的短行与长行混合。详情如下：

我提出的解决方案当然比随意地将选项卡包装到新行需要更多的工作，但作为回报，它允许用户以一种可以提高生产率的方式组织选项卡。

"workbench.colorCustomizations": {

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