VSCode 隐藏 top-right 个图标

Question

我非常喜欢 VScode 的极简主义方法，但有一件事困扰着我。我想隐藏 editor-tab 个图标。

图标来自扩展：git-lens & hexdump for VScode。 split-editor 图标也可以隐藏起来。

Answer 1

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

可选择在悬停时显示它们：

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

Answer 2

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

但我还是遇到了问题，尤其是在编写小程序时 window:

假设我想使用标签栏打开文件 "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 3

没有扩展名

打开 vs-code 读取的默认 css 文件以呈现其 window

cd /usr/share/code/resources/app/out/vs/workbench
sudo vim workbench.desktop.main.css # or whatever editors but vs-code

在最后添加这一行并保存

.editor-actions { display: none }

识别class元素名称,

只需按 ctrl + shift p 并输入 toggel developer tools

Answer 4

基于@teraoka 的回答，您可能希望保留一个脚本来执行此操作，因为设置会在每次 VSCode 更新自身时恢复

使用 Git-bash / cygwin:

#!/bin/bash

cd /c/Users/noel/appdata/local/Programs/Microsoft\ VS\ Code/resources/app/out/vs/workbench/
cp workbench.desktop.main.css workbench.desktop.main.css.`date +%Y%m%d%H%M`
echo ".editor-actions { display: none }" >> workbench.desktop.main.css

Answer 5

这里有一个更好的扩展。 Customize UI

Answer 6

可以在扩展设置中禁用 Giltens 图标：

https://github.com/eamodio/vscode-gitlens/issues/669#issuecomment-540975432

Answer 7

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

这是使用具有以下配置的 Customize UI 扩展完成的：

"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",
    },
}

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

此解决方案的唯一缺点是按钮会溢出最右侧的面包屑信息，但我对此没有意见。

VSCode 隐藏 top-right 个图标

VSCode hide top-right icons

visual-studio-code

vscode-settings