Logo

菜单

发布于 2026-01-06 6 阅读
0

极简的 VScode 用户界面！就这样。DEV 全球项目展示挑战赛，由 Mux 主办：展示你的项目！

极简的VScode用户界面！

就这样，事情结束了。

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

用户界面对某些人来说可能非常分散注意力或令人不知所措。我个人喜欢简洁但功能齐全且易于使用的用户界面。

我将带您快速了解我的 VScode 设置，主要目的是使其更简洁、更实用。

...

你将亲眼目睹它从这里被夺走！

前

就是这样！

后

太长不看

请查看我在dotfiles 仓库settings.json中的文件。

...

现在让我们深入细节，并先谈谈一些风格方面的看法。

...

主题

我更喜欢使用深色主题，我很少在阳光下或户外编写代码。

所以，我用过很多流行的壁纸，比如 Dracula、Night Owl、Tokyo Night 等等，我都很喜欢，但是正如你所料——可能你也已经知道了——我喜欢根据自己的喜好定制一切，所以我开始对一些流行的壁纸进行调整，比如稍微清理一下或者调暗一点。

于是，我收集了一些热门作品，并将它们打包成一个名为“Noir”的合集，发布到市场上，你可以在这里查看——完全免费——

我将使用其中之一，即 Noir Owl。

...

字体

我真的很喜欢连字，这对我来说至关重要。那些没有连字的等号检查总是让我感到困惑。<=,>=,...

其实我一直都不喜欢 Fira Code，这听起来可能有点奇怪，因为我刚才还提到了连字。我一直在 Cascadia Code 和 JetBrains Mono 之间切换。

最近我发现了 Monolisa，非常喜欢，试用了免费版，但是它缺少连字。后来我找到一个打过补丁的版本，虽然不是原生的连字，但也能用。你可以从这个仓库下载。

现在我们的工作空间看起来是这样的。

图片描述

...

既然大家都在这里，那就让我们来简化一下用户界面吧！

所以，我们将从最基本的步骤开始，然后再逐步深入。

...

活动栏（ctrl+\）

  "workbench.activityBar.visible": false
Enter fullscreen mode Exit fullscreen mode

您始终可以通过快捷键访问活动栏菜单，例如：资源管理器(ctrl+shift+E)、源代码管理(ctrl+shift+G)、扩展程序(ctrl+shift+X)等。

...

侧边栏（ctrl+B）

  "workbench.sideBar.location": "right"
Enter fullscreen mode Exit fullscreen mode

我更喜欢把它放在右边，这样当我切换它时，我的代码就不会像放在默认的左侧位置时那样跳动得那么厉害。

...

状态栏

反正我觉得状态栏没什么意思，所以我一直都把它隐藏着。你也可以随时通过命令面板切换它：切换状态栏可见性，或者直接把那一行代码添加到你的配置文件里。settings.json

  "workbench.statusBar.visible": false
Enter fullscreen mode Exit fullscreen mode

...

小地图

我发现用触控板缩放或滚动地图更容易，所以我也把小地图面板隐藏起来了。

  "editor.minimap.enabled": false
Enter fullscreen mode Exit fullscreen mode

...

滚动条

出于与之前相同的触控板滚动原因，我也隐藏了垂直和水平滚动条，所有高亮显示的部分可能看起来像概览标尺。

注：您可以随意保留任何您觉得有用的信息，我只是想把它们都隐藏起来。

  "editor.hideCursorInOverviewRuler": true,
  "editor.overviewRulerBorder": false,
  "editor.scrollbar.horizontal": "hidden",
  "editor.scrollbar.vertical": "hidden",
  "color-highlight.markRuler": false,
Enter fullscreen mode Exit fullscreen mode

...

面包屑

在文件导航方面，我有两种方法。
如果我想查看文件和文件夹的完整树状结构和层级关系，只需打开侧边栏（Ctrl+B）。
如果我知道要打开的文件名，只需按（Ctrl+P），即可打开一个快速输入框，按文件名搜索。

反正我不需要面包屑导航，所以我总是把它藏起来。

  "breadcrumbs.enabled": false
Enter fullscreen mode Exit fullscreen mode

你看，干净多了！

图片描述

...

现在让我们来仔细看看。

...

探索者

要移除压痕导轨，

  "workbench.tree.renderIndentGuides": "none"
Enter fullscreen mode Exit fullscreen mode

要隐藏打开的编辑器面板，

  "explorer.openEditors.visible": 0
Enter fullscreen mode Exit fullscreen mode

我喜欢源代码控制系统会根据仓库状态在资源管理器中更改文件颜色，但文件出现多种颜色让我很抓狂。我只想检查图标（例如“M”、“A”、圆点等等）。

所以，要禁用文件颜色但保留小图标，

  "explorer.decorations.colors": false
Enter fullscreen mode Exit fullscreen mode

...

编辑

括号

我发现彩色括号对功能其实挺实用。我们不会禁用它，但我认为用浅色边框高亮显示当前选中的括号已经足以让我识别出我的作用域了。

关闭它们的着色功能，

  "editor.bracketPairColorization.enabled": false
Enter fullscreen mode Exit fullscreen mode

我还会关闭括号引导线。

  "editor.guides.highlightActiveBracketPair": false,
  "editor.guides.bracketPairsHorizontal": false,
Enter fullscreen mode Exit fullscreen mode

...

缩进指南

我不太喜欢缩进参考线，VS Code 的高亮功能其实更好用，而且不像这些参考线那么显眼。你可以保留它们，但我总是把它们关掉。

  "editor.guides.indentation": false
Enter fullscreen mode Exit fullscreen mode

...

平滑光标

它们感觉更亲切，更不像机器人。

  "editor.cursorBlinking": "phase",
  "editor.cursorSmoothCaretAnimation": "on",
Enter fullscreen mode Exit fullscreen mode

...

活跃行列亮点

它们看起来不错，可能对某些人有用。如果您想关闭它们，只需添加此代码即可。

  "editor.renderLineHighlight": "none"
Enter fullscreen mode Exit fullscreen mode

...

左侧

我其实不需要编辑器左侧的任何部分（行号、折叠光标、字形边距）。

  "editor.glyphMargin": false,
  "editor.lineNumbers": "off",
  "editor.showFoldingControls": "never"
Enter fullscreen mode Exit fullscreen mode

注意：稍后我会向您展示如何切换它们。

...

窗口标题栏

我用的是 Windows 系统，所以 Windows 自带的标题栏挺丑的。

图片描述

VS Code 自定义标题栏看起来漂亮多了，不过我们还是稍微清理一下吧。
图片描述

...

菜单工具栏

你可以完全隐藏它，但我更喜欢将其设置为切换显示，这样我就可以通过Alt键快速访问它。

  "window.menuBarVisibility": "toggle",
Enter fullscreen mode Exit fullscreen mode

...

布局控件

您可以将其类型设置为“菜单”，将其转换为三个点的小菜单。

  "workbench.layoutControl.type": "menu"
Enter fullscreen mode Exit fullscreen mode

我会把它完全隐藏起来。

  "workbench.layoutControl.enabled": false
Enter fullscreen mode Exit fullscreen mode

...

窗口标题

如果您检查窗口标题的设置，您会发现它由许多变量组成，这些变量可能看起来像这样：${dirty}${activeEditorShort}${separator}${rootName}${separator}${profileName}${separator}${appName}

如果您尝试删除所有标题以隐藏窗口标题，则仍然会保留“Visual Studio Code”标题。

所以，一个小技巧是将其设置为单个空格，使其不可见。或者添加以下内容：

  "window.title": " "
Enter fullscreen mode Exit fullscreen mode

目前我们的工作空间看起来像这样。

图片描述

...

标签栏

遗憾的是，VS Code 本身并没有提供完全隐藏标签栏的原生解决方案。它唯一的设置选项是关闭“显示标签页”，但这样一来，标签页上仍然会显示当前文档的名称。

现在，我们得稍微耍点小花招。

  1. 我们将安装一个名为“自定义 CSS 和 Js 加载器”的扩展程序。

图片描述

这让我们能够轻松地将自定义 CSS 添加到 VS Code 用户界面中。

  1. 添加settings.json：
  // enter a url for your custom css file following notes below
  "vscode_custom_css.imports": ["{URL}"]
Enter fullscreen mode Exit fullscreen mode

非常重要：条目vscode_custom_css.imports必须是URL。普通文件路径不是 URL。

  • Windows 文件 URL 示例：file:///C:/Users/MyUserName/Documents/custom.css
    • 该C:/部件为必需品。
  • macOS 和 Linux 文件 URL 示例：file:///Users/MyUserName/Documents/custom.css
  1. 转到指定路径并创建一个新custom.css文件，然后添加以下几行代码。
.tabs-and-actions-container {  
    display: none !important;  
}
Enter fullscreen mode Exit fullscreen mode

注意：如果您已经在 J​​SON 文件中输入了完整的 URL，您可以按住 Ctrl 键并单击该 URL，VS Code 会智能地检测到该文件不存在，并提示您创建该文件，然后立即在窗口中打开它。

  1. 以管理员权限重启 VS Code
  2. 从命令面板（Ctrl+Shift+P）启用自定义 CSS 和 JS

  3. 点击重启通知即可重启 VS Code。

    • 特别提示：如果 Visual Studio Code 提示文件已损坏，只需单击“不再显示”即可。

  4. 瞧！

图片描述

注意：您始终可以使用 Ctrl+Tab 和 Ctrl+Shift+Tab 切换标签页，使用 Ctrl+W 关闭标签页，以及许多其他可在键盘快捷键菜单中配置的快捷键。

扩展命令

  • 启用自定义 CSS 和 JS：它启用vscode_custom_css.imports用户设置中“ ”数组中列出的自定义 CSS 和 JS URL，该数组包含您的自定义 CSS 和 JS 文件的 URL。
  • 禁用自定义 CSS 和 JS：这将禁用自定义 CSS。
  • 重新加载自定义 CSS 和 JS：禁用后再重新启用。

您可以在扩展程序仓库或市场页面上查看所有说明！

注意：这并非完美解决方案，因为它会在编辑器底部留下空白区域，但它确实能完成任务。

...

快完成了，

...

最后一个扩展程序可以用来自定义一些 VS Code 本身没有的命令。例如，如果我想用快捷键切换行号的显示，VS Code 本身并没有这个功能。

我们可以使用设置循环器

图片描述

它允许你在文件中创建自定义命令settings.json。现在我们可以实现行号切换示例了。

我们settings.json可以通过类似这样的方式配置我们的扩展程序

"settings.cycle": [
    {
      "id": "lineNumbers",
      "values": [
          { "editor.lineNumbers": "off" },
          {"editor.lineNumbers": "on"}
      ]
    }
  ],
Enter fullscreen mode Exit fullscreen mode

现在，我们创建了一个名为“自定义命令”的命令settings.cycle.lineNumbers，我们可以通过键盘快捷键菜单将其分配给键盘快捷键（ctrl+K ctrl+S）。

图片描述

例如，快捷键（Alt+L）用于切换我们的自定义命令。

更多信息请查看扩展程序库或市场页面。

...

就这样，事情结束了。

如果你有什么实用的小技巧，请告诉我。下次再见！

文章来源：https://dev.to/andrewgeorge/minimal-vscode-ui-343e
将 GitHub 存储库克隆到本地...
Gemini 3 现已作为 Ten...