logo标签列表

VSCode 隐藏右上角图标（在选项卡栏中）

visual-studio-code
43
我是VScode极简主义的忠实粉丝，但有一件事让我感到困扰。我想隐藏编辑器标签图标。

enter image description here

这些图标来自扩展程序：git-lens和hexdump for VScode。还有分割编辑器图标最好隐藏起来。
相关问题：https://dev59.com/9VMH5IYBdhLWcg3wzi56 - Ignacio Lago
相关问题：https://github.com/microsoft/vscode/issues/128867 - Matthias
8个回答
21

扩展程序Custom CSS and JS Loader

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

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

.tabs-and-actions-container:hover .editor-actions {
    display: flex !important;
}
这个解决方案还是否时效的？ - Joep
@Joep 我认为这是最新的（可用的）答案 https://dev59.com/HlYN5IYBdhLWcg3wjIuY#MyftnYgBc1ULPQZFrRPm - Paolo
20

我遇到了同样的问题，Alex的答案帮了我很多（只在hover时显示图标）。

但是我还有一个问题，特别是在小窗口编码时：

假设我想打开“styles.css”文件，使用选项卡栏：

enter image description here

一旦我的鼠标进入选项卡区域，菜单就会弹出（因为hover诀窍），我就无法点击我的选项卡，因为它在图标下面：

enter image description here

所以我想到了这个想法：

当悬停时，在选项卡下方显示图标栏（而不是在选项卡上层显示）

这是结果：

enter image description here

这是我是如何做的：

.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;
}
很棒的想法，这本应是默认行为。 - Ali80
感谢这个棒极了的解决方案。我将它作为基础，用于另一种方法，将按钮移到面包屑栏下面。链接 - carlfriedrich
7

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

icons in breadcrumb bar

这是通过使用自定义 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",
    },
}

这个解决方案与主题无关，因此适用于所有颜色组合。按钮的背景颜色始终与选项卡栏的背景颜色相同。如果您只使用一个静态主题，则可以将 .tabs-and-actions-container .editor-actions 选择器的 background-color 硬编码为面包屑栏的确切颜色，以实现更无缝的设计。但是，在切换主题时，这种方法不起作用。唯一的缺点是按钮会溢出最右侧的面包屑信息，但我可以接受。
1
太好了！顺便建议将“.tabs-and-actions-container .editor-actions”的“background-color”设置为“transparent”。 - IceSea
1
@IceSea 感谢您的评论和建议。将其设置为“透明”肯定有效，并且在面包屑较短的情况下看起来很好。如果它们变得更长并与按钮重叠，您将很难弄清楚哪个按钮在哪里，因此这不是理想的选择。 - carlfriedrich
@IceSea 听起来确实很有用！ - carlfriedrich
这是目前最好的解决方案。请提供您在错误报告中的评论链接，以便人们可以投票。 - vanowm
1
警告：Customize UI扩展现在破坏了VS Code的安装：https://github.com/iocave/customize-ui/issues/156。要撤消`Monkey Patch扩展（也会自动安装）的破坏性更改，请转到C:\Program Files\Microsoft VS Code\resources\app\out并从此文件夹中的备份文件恢复*.js`文件。 - d9k
显示剩余4条评论
4
2
"gitlens.menus": false, in settings.json - philn
4
结合Vincent的回答，想法是在安装自定义UI后，在设置中添加以下行： "customizeUI.stylesheet": { ".tabs-and-actions-container .editor-actions" : "display: none !important; position: absolute; top: 20px; 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;" } - Théophile
4

没有扩展

  1. 打开vs-code读取以呈现其窗口的默认css文件
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 }

识别元素的类名

只需按下 ctrl + shift p 并键入 toggel developer tools 即可。

请注意，您会收到有关损坏文件的错误消息。您可以单击齿轮图标并忽略它。您将使用扩展名Custom CSS和JS Loader获得相同的警告。因此，这个解决方案具有更少的开销，但是可以完成相同的工作。 - Noel Evans
在Windows上，文件在这里：C:\Users\username\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench - Noel Evans
不错的解决方案！每次更新后，扩展程序总是无法使用。这个要好得多。 - clk
2
在Insiders v1.72中，现在可以隐藏/显示工具栏上的任何图标，请参见/hide menuItems。

remove tab toolbar icons

0
在 @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
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接