在visual studio代码中隐藏顶栏（zen模式）

Question

我已经隐藏了标签，并禁用了一些东西，如行号等。如何删除包含文件名ProfilePrivate.tsx的顶栏？

Answer 1

这是一个人可以做的，以改善禅宗模式。

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

首先，从这些标准设置中进行选择，放入settings.json。有些设置需要重新启动，例如< code>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,
}

我在这些答案中找到了这些设置：西希笑的答案，1,2,3,4,5,6,7,8。

如果这还不够，请将以下CSS规则附加到workbench.desktop.main.css。该文件通常位于C：\用户\

重新启动后，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;
}

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

之前/之后的屏幕截图：

Answer 2

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

安装：多命令，设置Cycler，自定义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;",
        },
      }
    ]
  }
],

要使用此功能，请从命令选项板：

• 多命令：执行多命令
  • 选择toggleUltraZen并点击回车

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

  我也使用(用于编码):

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

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

  

Answer 3

我找到了解决办法。

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

1. 安装自定义 CSS

它应该隐藏顶栏。