在Visual Studio Code中隐藏顶部栏（禅模式）

Question

我已经隐藏了选项卡并禁用了一些东西，比如行号等。如何摆脱包含文件名ProfilePrivate.tsx的顶部栏？

- stpoa

---

有一个未解决的问题，可以隐藏选项卡栏中的按钮（https://github.com/Microsoft/vscode/issues/46403）。我还没有看到关于删除文件名的任何信息。 - Alex Myers

Answer 1

我已经找到了一个解决方案。

https://github.com/Microsoft/vscode/issues/33607#issuecomment-424193133

1. 安装Custom CSS & JS vscode插件
2. 创建文件/Users/(你的用户名)/.vscode.css并粘贴以下内容：.title.show-file-icons { display: none !important; }
3. 更改vscode设置，添加："vscode_custom_css.imports": ["file:///Users/(你的用户名)/.vscode.css"]
4. 按下CMD + Shift + P，输入“Enable custom css and js”
5. 重新启动vscode

这将隐藏顶部栏。

- stpoa

---

仍然适用于2020年。我只是想在全屏模式下隐藏它，所以我使用了.fullscreen .title.show-file-icons {display: none !important;}。 - Nils Lindemann

@NilsLindemann 尽管它隐藏了顶部栏，但在底部留下了空白空间。https://i.imgur.com/JdlpoOd.jpg - tejasvi88

@tejasvi88 很遗憾，这个问题无法完全修复，但我已经尽力了，请参见我的回答。 - Nils Lindemann

Answer 2

使用命令面板隐藏顶部栏：

安装 multi-command, Settings Cycler, Customize UI 扩展。

将以下内容添加到您的 settings.json 文件中：

  "zenMode.restore": true,
  "multiCommand.commands": [
    {
        "command": "toggleUltraZen",
        "sequence": [
            "workbench.action.toggleZenMode",
            "settings.cycle.ultraZen",
            "workbench.action.reloadWindow",
        ]
    },
  ],
  "settings.cycle": [{
    "id": "ultraZen",
    "overrideWorkspaceSettings": false,
    "values": [
      {
        "customizeUI.stylesheet": {}
      },
      {
        "customizeUI.stylesheet": {
          ".title.show-file-icons": "display: none !important;",
        },
      }
    ]
  }
],

要使用此功能，请从命令面板中执行以下步骤：

1. 多命令：执行多个命令
   • 选择 toggleUltraZen 并按 Enter 键

请注意，第一个命令将重新加载窗口。

我还使用以下内容（用于编码）：

  "zenMode.fullScreen": false,
  "zenMode.centerLayout": false,
  "zenMode.hideLineNumbers": false,
  "zenMode.hideStatusBar": false,

你可以根据自己的需求选择（它们可以从设置界面访问）。

- xixixao

---

嗯...对我来说不起作用，但我很好奇我们是否在讨论同一个菜单栏？https://i.imgur.com/GaFJNTs.png - MCGRAW

Answer 3

以下是可以改善ZEN模式的方法。

（在底部仍然有一个区域会在滚动时覆盖代码。不幸的是，我无法使用CSS修复它（至少对我来说），因为编辑器的高度是通过JavaScript动态计算的。可能可以使用像Monkey Patch这样的扩展来解决，但我没有测试过。）

首先，从这些标准设置中选择要放入settings.json中的设置。某些设置需要重新启动，例如editor.scrollbar设置。某些设置也会影响非ZEN模式下的显示。

{
    "breadcrumbs.enabled": false,
    "editor.codeLens": false,
    "editor.folding": false,
    "editor.foldingHighlight": false,
    "editor.highlightActiveIndentGuide": false,
    "editor.lineNumbers": "off",
    "editor.matchBrackets": "never",
    "editor.minimap.enabled": false,
    "editor.minimap.renderCharacters": false,
    "editor.minimap.showSlider": "always",
    "editor.occurrencesHighlight": false,
    "editor.overviewRulerBorder": false,
    "editor.renderIndentGuides": false,
    "editor.renderLineHighlight": "none",
    "editor.rulers": [],
    "editor.scrollbar.horizontal": "hidden",
    "editor.scrollbar.vertical": "hidden",
    "editor.smoothScrolling": true,
    "editor.selectionHighlight": false,
    "scm.diffDecorations": "none",
    "window.title": "${activeEditorLong} ${dirty}",
    "window.titleSeparator": " – ",
    "window.zoomLevel": 1.3,
    "workbench.colorCustomizations": {
        // see https://code.visualstudio.com/api/references/theme-color
    },
    "workbench.editor.showTabs": false,
    "zenMode.centerLayout": true,
    "zenMode.fullScreen": true,
    "zenMode.hideLineNumbers": true,
    "zenMode.hideStatusBar": true,
    "zenMode.hideTabs": true,
    "zenMode.restore": false,
}

我在以下答案中找到了这些设置：Xixixao's answer, 1, 2, 3, 4, 5, 6, 7, 8。

如果这还不够，将以下 CSS 规则附加到 workbench.desktop.main.css 中。该文件通常位于 C:\Users\<username>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench。如果没有找到，请使用 帮助 → 切换开发人员工具 找出它的位置，或者 搜索系统范围 查找它。

重启后，VSCode 将显示一个警告，指出您的安装程序“已损坏”。没关系，请选择“不再显示此消息”。或者，您也可以尝试使用 自定义 UI 等插件来完成。我没有测试过这个方法。

.fullscreen .decorationsOverviewRuler {
    display:none !important;
}

.fullscreen .invisible.scrollbar.vertical {
    display:none !important;
}

/* You dont need this if you have "zenMode.centerLayout": false, */
.fullscreen .monaco-split-view2.separator-border>.monaco-scrollable-element>.split-view-container>.split-view-view:not(:first-child):before {
    background:transparent !important;
}

/* Do not use these if you have "zenMode.hideTabs": false, */
.fullscreen .title.show-file-icons {
    display: none !important;
}
.fullscreen .editor-container {
    margin-top:34px !important;
}
.fullscreen .scroll-decoration {
    display:none !important;
}

我通过使用 帮助 → 切换开发者工具 检查源代码找到了这些调整。

之前/之后的截图：

- Nils Lindemann