VSCode隐藏右上角的图标

Question

我是VScode极简主义方法的忠实粉丝,但有一点让我烦恼.我想隐藏编辑标签图标.

图标来自扩展名:git-lens&hexdump for VScode.分割编辑器图标也很好隐藏.

Answer 1

我遇到了同样的问题，亚历克斯的回答对我有很大帮助（仅在悬停时显示图标）。

但是我仍然有一个问题，尤其是在小窗口中编码时：

假设我想使用标签栏打开文件“styles.css”：

一旦我的鼠标进入选项卡区域，菜单就会显示（由于悬停技​​巧），我无法单击我的选项卡，因为它位于图标下方：

于是我萌生了这个想法：

悬停时显示选项卡下方（而不是选项卡上方）的图标栏

结果如下：

这是我如何做到的：

.tabs-and-actions-container .editor-actions {
    display: none !important;
    position: absolute;
    top: 35px;
    right: 0;
    z-index: 1;
    background-color: #2D2D2D;
}
.tabs-and-actions-container:hover .editor-actions {
    display: flex !important;
}
.title.tabs.show-file-icons {
    overflow: unset !important;
}

Answer 2

扩展自定义CSS和JS加载器

.tabs-and-actions-container .editor-actions {
    display: none !important;
}

Answer 3

我将 Vincent 和 mozlingyu 的答案结合到另一个解决方案中：不要隐藏按钮，而是将它们向下移动一级到面包屑栏：

这是使用自定义 UI扩展（警告 2023：它可能会破坏您的 VS Code 安装）和以下配置来完成的：

"customizeUI.stylesheet": {
    ".tabs-and-actions-container": {
        "background-color": "inherit",
    },
    ".tabs-and-actions-container .editor-actions": {
        "position": "absolute",
        "top": "100%",
        "right": "0px",
        "height": "22px !important",
        "z-index": "1",
        "background-color": "inherit",
    },
    ".tabs-and-actions-container .editor-actions .action-item": {
        "margin-right": "3px !important",
    },
    ".tabs-and-actions-container .editor-actions .action-item a": {
        "font-size": "13px",
    },
    ".tabs-and-actions-container .editor-actions .action-item .codicon": {
        "width": "13px",
        "height": "13px",
    },
    ".tabs-and-actions-container .tab:last-child": {
        "margin-right": "0 !important",
    },
    ".title.tabs.show-file-icons": {
        "overflow": "unset !important",
    },
}

该解决方案与主题无关，因此它应该适用于所有颜色组合。按钮的背景颜色始终与选项卡栏的背景颜色相同。如果您仅使用一个静态主题，则可以将选择器background-color的硬编码.tabs-and-actions-container .editor-actions为面包屑栏的确切颜色，以获得更无缝的设计。但是，切换主题时这不起作用。

该解决方案的唯一缺点是按钮溢出了最右侧的面包屑信息，但我对此表示满意。