七爪源码:最大化生产力的最小 VSCode 设置(第 1 部分)

VSCode 是世界上最流行的 IDE，但是 VSCode 附带的设置对于大多数编程目的来说可能会让人感觉过于繁琐和多余。

为了解决这个问题，我创建了自己的最小 VSCode 设置，没有杂乱和干扰，以帮助提高工作效率并缓解长时间编码过程中的眼睛疲劳。

在本教程中，我将向您展示您可以进行的所有设置和更改。 我将向你展示如何让你的 VSCode 摆脱这种丑陋的混乱，

至此！

让我们开始！

Settings.JSON 文件

首先，首先打开我们的 settings.json 文件，这是 VSCode 用来存储我们所有设置的文件。 我们将使用此文件而不是设置 UI，因为我们可以简单地将所需的设置复制并粘贴到此文件中。

按 Control + Shift + P 打开命令面板，然后输入“设置”。 从下拉菜单中，选择“首选项：打开设置（JSON）”。

我将在本教程中介绍的大多数设置都是不言自明的，但我在更晦涩的设置中附加了一些注释来解释它们的作用。

如果您不喜欢我介绍的任何特定更改，请随时将其更改回来！ 记住：每个人都不一样，你的 VSCode 应该为你量身定做！

整理布局

首先，让我们清理一下 VSCode 凌乱的布局。 通过复制它们并将它们粘贴到 JSON 文件中来应用以下设置。

// Disables the layout control icon at the top right
"workbench.layoutControl.enabled": false, 
// Enables an infinite amount of editors and disables
// the useless "Open Editors" panel in the explorer.
"explorer.openEditors.visible": 0,
"explorer.autoReveal": false,
// Sets the sidebar location to the right
"workbench.sideBar.location": "right",
// Disables the useless minimap to the right of our code
"editor.minimap.enabled": false,
"workbench.tree.indent": 12,
"workbench.tree.renderIndentGuides": "none",
// OPTIONAL: Hides the sidebar completely.
// If you choose to enable this, you can still
// access it using keyboard shortcuts instead.
// Ex: Control Shift E for Explorer
// Control Shift G for Version Control
// Control Shift X for extensions, etc.
"workbench.activityBar.visible": false,

您可能想知道为什么我决定将侧边栏和资源管理器从左移到右。 两个原因：

1. 当侧边栏在左侧时，每次我们打开侧边栏时，它都会将我们的编辑器和我们的代码移到右侧，这对我们的眼睛来说既烦人又烦人。
2. 其次，通过将侧边栏移动到右侧，我们将所有文本和颜色分布在整个屏幕上，并使所有内容更加干净和均匀，进一步整理我们的布局。

同样，如果您不喜欢此更改，请随时将其更改回来！ 我个人更喜欢这样。

简化我们的编辑器

我们已经清理了布局，现在让我们专注于我们的编辑器。

应用下一组设置，专门设计用于删除我们编辑器中不必要的元素，并为您的代码提供最多的空间。

// Removes the close tab button. Use Control + W instead.
"workbench.editor.tabCloseButton": "off",
// Removes the useless "breadcrumbs" tree below our tabs
"breadcrumbs.enabled": false,
"editor.overviewRulerBorder": false,
// Add some padding to the top and bottom of our file
"editor.padding.bottom": 14,
"editor.padding.top": 14,
"editor.scrollbar.horizontal": "hidden",
"editor.codeLens": false,
// OPTIONAL: Removes the glyph margin for breakpoints
// and other symbols that most people don't use.
// If you use those things, feel free to enable this!
"editor.glyphMargin": false,

好的！ 通过删除编辑器中没有人真正使用的无用元素，我们刚刚增加了代码可以占用的所有空间。 我们还在代码的顶部和底部添加了一些填充，隐藏了华丽的边框和滚动条，并清理了我们的标签栏。

然而，仍然有很多闪烁、突出显示和弹出窗口到处发生，这会给我们的眼睛造成不必要的压力，并分散我们对代码的注意力。 要消除所有这些干扰，请应用这些下一组设置。

"editor.foldingHighlight": false,
// Stops highlighting the current line.
"editor.renderLineHighlight": "none",
// Disables unnecessary and useless highlighting
// of current indentation.
"editor.guides.indentation": false,
"editor.guides.highlightActiveIndentation": false,
// Stops highlighting matching bracket pairs.
// Colored brackets eliminates the need for this!
"editor.matchBrackets": "never",
"editor.guides.highlightActiveBracketPair": false,
// OPTIONAL: Disables parameter hints.
// If you'd prefer to receive hints, leave these
// settings on!
"editor.parameterHints.enabled": false,
"editor.inlayHints.enabled": "off",

其他布局和编辑器设置

以下是您可以考虑将其用于 VSCode 的其他一些有用但可选的设置。 我附上了解释每个人做什么的评论。

"editor.smoothScrolling": true,
// Removes inline suggestions
"editor.inlineSuggest.enabled": false,
// If you find that you don't use line numbers much
// and want even more space for your code, don't be
// afraid to turn this off!
"editor.lineNumbers": "off",
"explorer.compactFolders": false,
"window.autoDetectHighContrast": false,
"zenMode.fullScreen": false,
// Customizing your font and spacing (line height)
"editor.fontSize": 16,
"editor.fontWeight": "350", // OPTIONAL
"editor.lineHeight": 24,

哦，别忘了你也可以对 VSCode 进行其他自定义，比如安装自定义主题和图标主题，以及为你的编辑器使用你自己的等宽字体。

保存和预览更改

应用所需的所有设置后，请确保保存 settings.json 文件并重新启动 VSCode。 如果一切都正确完成，您的编辑器现在应该如下所示：

是不是看起来好多了？

等一下……我的布局仍然不像你的！

是的！ 这是正确的。

VSCode 有大量的自定义，但它仍然有其局限性。

如果您对现在的所有外观感到满意，或者您不想安装扩展程序，您可以立即停止并继续前进。

但是，如果您想进一步清理您的 UI，请加入本教程的第二部分，我将向您展示如何使用自定义 UI 扩展来使用我们的内嵌标题栏、自定义 UI 字体、自定义字体大小和间距 探险家等等。

回头见！