VSCode 的多行选项卡 [英] Multirow Tabs for VSCode

查看：96
本文介绍了VSCode 的多行选项卡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我通常在每个编辑器窗口中打开 10 个以上的选项卡，这使得来回滚动(或使用 ctrl+tab)来查找我想要的文件变得很乏味.

有没有办法让 tabs 包装起来?

类似于 Atom 的 multirow-tabs.

更新:看起来是进展.

解决方案

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

  • 只需在设置中将 workbench.editor.wrapTabs 设置为 true.
  • 我仍然使用下面提到的配置来根据我的使用情况缩小标签.

<块引用>

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

  • 修复了标签关闭按钮的 CSS
  • 为较小的面包屑和 acion-bar(在标签栏的右侧)添加了 CSS

我对视觉工作室代码中的多行选项卡执行以下操作(直到有官方支持或更简单的解决方案):

步骤 1: 安装扩展 VSCode 自定义 CSS.(查看扩展页面以获取正确的安装说明.由于 VSCode 不正式支持更改内部 CSS，这有点麻烦.)

第 2 步: 创建一个 CSS 文件(例如，/home/user/vscode/custom.css")并添加以下内容:

/* 按照 CSS 将标签栏包装成多行:*/.tabs-and-actions-container >.monaco-scrollable-element {高度:自动！重要；}.tabs-and-actions-container >.monaco-scrollable-element >.tabs-容器{高度:自动！重要；flex-wrap: 包裹;}/* 遵循 CSS 使选项卡更薄/更小(以便它们占用更少的垂直空间):*/.monaco-workbench .part.editor >.content .editor-group-container >.title .tabs-container >.标签 {高度:25px；左边距:4px；字体大小:0.8em；/* 标签图标和标签的较小字体大小 */}.monaco-workbench .part.editor >.content .editor-group-container >.title .tabs-container >.tab .label-name {字体大小:继承！重要；/* 继承标签的更新字体大小 */}/* 以下 CSS 用于选项卡上较小的关闭按钮:*/.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-close {宽度:20px；}.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-close .action-label {高度:12px；宽度:12px；背景尺寸:12px；}.monaco-workbench .part.editor>.content .editor-group-container.active>.title .tabs-container>.tab>.tab-close .action-label.codicon {字体大小:12px；}/* 可选:遵循 CSS 以获得较小的面包屑(在标签栏下方)*/.monaco-面包屑{字体大小:0.65em；不透明度:0.8；高度:18px！重要；}.tabs-breadcrumbs .breadcrumbs-control {高度:18px！重要；}.monaco-workbench .symbol-icon.block {高度:8px；宽度:8px；最小高度:8px；最小宽度:14px；背景位置:50%；背景大小:包含；}.breadcrumbs-control .monaco-breadcrumb-item:before {最小宽度:12px！重要；高度:12px！重要；背景大小:包含 !important;}/* 可选:跟随 CSS 用于带有菜单、拆分等的较小操作栏(标签栏旁边)*/.monaco-workbench .part.editor>.content .editor-group-container>.title .editor-actions {高度:20px；填充:0;}.monaco-workbench .part.editor>.content .editor-group-container>.title .editor-actions .action-label, .monaco-workbench .part.editor>.content .editor-group-container>.title .标题动作.动作标签{高度:20px；行高:20px；最小宽度:14px；背景尺寸:8px；}.tabs-and-actions-container >.editor-actions >.monaco-工具栏>.monaco-action-bar >.actions-容器{最大宽度:60px；弹性包裹:包裹；}

第 3 步:将扩展指向您的自定义 CSS.打开 VSCode settings.json [Ctrl+Shift+P >"Open Settings(JSON)"] 并添加以下几行(包含您的 custom.css 文件路径):

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

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

信用:此解决方案(扩展链接和将标签栏包装成多行的 CSS)最初由 Steven Laidlaw 在这个 Github 线程.我只是为较小的标签扩展了 CSS.

I commonly have 10+ tabs open per editor window which makes it tedious to scroll back and forth (or use ctrl+tab) to find the file I want.

Is there any way to have the tabs wrap?

Similar to Atom's multirow-tabs.

Update: Looks like it is a work in progress.

解决方案

UPDATE Feb 2021: In-built support for tabs-wrapping in VSCode v1.53.0+

  • Just set the workbench.editor.wrapTabs to true in the settings.
  • I still use my configuration mentioned below to make tabs smaller as per my usage.

UPDATED 28 March 2020 for VSCode v1.43.2

  • Fixed CSS for tab-close button
  • Added CSS for smaller bread-crumbs and acion-bar (at the right of tab-bar)

I do the following for multirow tabs in visual-studio-code (until there is official support or an easier solution):

STEP 1: Install the extension VSCode Custom CSS. (Check out the extension page for proper installation instruction. It's a bit of a hack as VSCode does not officially support altering internal CSS.)

STEP 2: Create a CSS file (say, "/home/user/vscode/custom.css") and add the following contents:

/* 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;
}

STEP 3: Point the extension to your custom CSS. Open the VSCode settings.json [Ctrl+Shift+P > "Open Settings(JSON)"] and add the following lines (with your path to custom.css file):

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

STEP 4: Make sure you have gone through the VSCode Custom CSS extension's readme and enabled it properly. You may have to reload VSCode. Also, edit the CSS as per your preferences!

CREDIT: This solution (link to extension and the CSS to wrap tab-bar into multi-lines) was originally posted by Steven Laidlaw in this Github thread. I just extended the CSS for smaller tabs.

这篇关于VSCode 的多行选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆