Question

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

Answer 1

我找到了解决方法。

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

安装自定义CSS和JS vscode插件
创建文件/Users/(yourusername)/.vscode.css并粘贴到其中：.title.show-file-icons { display: none !important; }
更改vscode设置，添加："vscode_custom_css.imports": ["file:///Users/(yourusername)/.vscode.css"]
按CMD + Shift + P并编写“启用自定义CSS和js”
重新启动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;",
        },
      }
    ]
  }
],

要使用它，从命令面板：

Multi command: Execute multi command
- 选择 toggleUltraZen 并按 Enter

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

我也使用（用于编码）：

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

您可以根据自己的需要进行选择（可从“设置”用户界面访问它们）。

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、{{3 }}、6、7。

如果这还不够，请将以下 CSS 规则附加到 workbench.desktop.main.css。此文件通常位于 C:\Users\<username>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench。如果不是，请使用 Help → Toggle Developer Tools 找出它所在的位置，或者 8 为它。

重新启动后，VSCode 会警告您的安装已“损坏”。没关系。选择“不再显示消息”。或者，您也可以尝试使用诸如 search system wide 之类的附加组件来执行此操作。我没有测试。

.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 检查源代码发现了这些调整。

之前/之后的截图：

Customize UI

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

3 个答案: