.tabs-and-actions-container .editor-actions {
display: none !important;
}
可选择,在悬停时显示它们:
.tabs-and-actions-container:hover .editor-actions {
display: flex !important;
}
我遇到了同样的问题,Alex的答案帮了我很多(只在hover时显示图标)。
但是我还有一个问题,特别是在小窗口编码时:
假设我想打开“styles.css”文件,使用选项卡栏:
一旦我的鼠标进入选项卡区域,菜单就会弹出(因为hover诀窍),我就无法点击我的选项卡,因为它在图标下面:
所以我想到了这个想法:
当悬停时,在选项卡下方显示图标栏(而不是在选项卡上层显示)
这是结果:
这是我是如何做的:
.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;
}
我将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",
},
}
.tabs-and-actions-container .editor-actions
选择器的 background-color
硬编码为面包屑栏的确切颜色,以实现更无缝的设计。但是,在切换主题时,这种方法不起作用。唯一的缺点是按钮会溢出最右侧的面包屑信息,但我可以接受。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"gitlens.menus": false,
in settings.json
- philn "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没有扩展
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
即可。
C:\Users\username\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench
- Noel Evans#!/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