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

Question

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

Answer 1

我找到了解决办法。

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

1. 安装自定义 CSS & JS vscode 插件
2. 创建文件/Users/(yourusername)/.vscode.css 并粘贴到那里：.title.show-file-icons { display: none !important; }
3. 更改 vscode 设置添加："vscode_custom_css.imports": ["file:///Users/(yourusername)/.vscode.css"]
4. 按CMD + Shift + P 并编写启用自定义css和js
5. 重启 vscode

它应该隐藏顶栏。

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. Multi command: Execute multi command
   • 选择 toggleUltraZen 并按 Enter 键

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

我也使用（用于编码）：

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

您可以根据自己的需要进行选择（可从设置 UI 访问）。

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。如果不是，请使用 Help → Toggle Developer Tools 找出它所在的位置，或使用search system wide 来确定它。

重新启动后，VSCode 会发出警告，提示您的安装“已损坏”。没关系。选择“不再显示消息”。或者，您也可以尝试使用 Customize 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;
}

我通过使用 Help → Toggle Developer Tools 检查源代码发现了这些调整。

之前/之后的屏幕截图：