有一天，我正在闲暇地浏览 LinkedIn，专注于自己的事情，这时我偶然发现了这篇文章。这家伙正在炫耀他的作品，我得说，这真是令人印象深刻。但是，突然，这个家伙突然发表了一条评论，说：“你的 vscode 看起来不专业。” 说什么？UnPr0FesSi0naL？严重地？
但是嘿，你猜怎么着？你在这个行业呆的时间越长，你就越会意识到普通的旧式 VSCode 并不能解决这个问题。说真的，谁会在乎评论部分中那个说你的 VSCode 看起来不专业的家伙呢？真的吗？在这篇文章中，我将向您展示如何改进您的 IDE 并使其成为您工作场所羡慕的对象。准备好通过一些非常酷的 VSCode 调整来震撼您的编码游戏！
我选择“黑暗现代”主题作为我个人的选择。它在足够暗的颜色之间取得了平衡，既可以提供时尚的外观，又不会过于强烈。颜色对比度恰到好处，在长时间的编码过程中使眼睛舒适。它的外观精致而精致，为我的编码环境增添了一丝优雅。
“Dark Modern”主题于2023 年 4 月在 VSCode 1.78 版本中作为默认深色主题引入。如果您仍在使用旧版本，那么现在是升级的时候了。现在已经快到六月了，你不想比其他人落后两个多月吧？
在我们继续主题之前，让我向您介绍命令面板。您可以通过按组合键轻松访问它Ctrl Shift P。它是一个方便的工具，让您只需按几下按键即可执行命令并访问各种功能。一旦您开始使用它，您就会意识到它是多么方便和省时
显示命令面板后，只需输入“ user settings”，您就会看到两个选项：“ Preferences: User settings (Json)”和“ Preferences: Open User Settings”。第一个选项允许您使用 JSON 文件编辑所有设置，而第二个选项则提供用于配置的图形用户界面 (UI)。就我个人而言，我发现使用 JSON 文件比通过 UI 导航更快。根据您的喜好和编辑设置的舒适程度，选择最适合您的选项。
FiraCode是一个绝佳的选择。它是一种等宽字体，可将编程连字带到表格中，使您的代码看起来更加时尚和可读。
黑暗现代主题中使用的字体不仅具有视觉吸引力，而且赏心悦目。其低对比度的颜色营造出舒缓舒适的编码体验。就我个人而言，我更喜欢低对比度的颜色，因为它们可以帮助我保持注意力并避免分心。如果您想使用该字体，可以按照字体创建者提供的说明进行下载。
"editor.fontFamily": "'FiraCode NF', 'firaCode Nerd Font', 'Cascadia Code', Consolas, 'Courier New', monospace",
"editor.fontLigatures": true,菜单
我在 VSCode 中隐藏菜单以获得更清晰的界面，并依靠快捷方式来实现更快的导航和操作。现在标题栏干净了。
"window.menuBarVisibility": "compact"
我发现中心的命令看起来非常酷，让我更容易识别当前正在处理的工作区，特别是在处理多个工作区时。
“window.commandCenter” ： true小地图
为了解决小地图带来的烦恼（它会分散包括我在内的许多人的注意力），我找到了一种方法来回收宝贵的屏幕空间，而不会在重构等某些任务中牺牲其有用性。通过调整设置，我将小地图配置为仅当我将光标悬停在编辑器的最右侧部分时才显示。这样，我就有更多的空间来专注于我的代码，同时仍然可以在需要时随时访问小地图。
"editor.minimap.autohide": true,
"editor.minimap.enabled": true,
"editor.minimap.renderCharacters": false,
"editor.minimap.scale": 1,
"editor.minimap.showSlider": "mouseover",
"editor.minimap.side": "right",
小地图是一个方便的工具，可以快速定位我们在代码中的位置。然而，过多显示复杂的字符可能会降低性能。我选择将小地图缩小到值 1。
面包屑面包屑功能可能有其审美吸引力，但我个人认为它没有什么实际用途。因此，我决定完全禁用它。
"breadcrumbs.enabled": false光标样式、光标周围和装订线
细光标很难找到，当您键入纯文本时，默认颜色会混合在文本中。
"editor.cursorBlinking": "solid",
"editor.cursorSmoothCaretAnimation": "off",
"editor.cursorSurroundingLines": 10,
"editor.cursorSurroundingLinesStyle": "default",
"workbench.colorCustomizations": {
"editorCursor.background": "#ff930f",
"editorCursor.foreground": "#ff930f",
}
将背景和前景色设置为“#ff930f”使光标从黑色主题中脱颖而出，比袜子更容易找到。
“cursorSurroundingLines”设置非常方便，特别是当您使用箭头键浏览文件时。它确保您在滚动时有 10 行偏移，这有助于您保持在代码中的位置。
悬停延迟默认的悬停延迟对于忙碌的人来说太慢了，也需要更改：
"editor.hover.delay": 300,
"workbench.hover.delay": 1,
将编辑器悬停延迟设置为 300 毫秒是实现响应性和可用性之间平衡的不错选择。这种延迟使您可以快速浏览代码，而不会无意中触发悬停
支架对在 VSCode 中，有一个称为括号对突出显示的内置功能，可以帮助您轻松识别代码中匹配的括号对。通过启用水平括号对突出显示，您可以在上下滚动代码时跟踪相应的左括号和右括号。
此外，在浏览代码时呈现缩进和突出显示活动缩进可能会很有帮助。
"editor.guides.bracketPairs": true,
"editor.guides.bracketPairsHorizontal": "active",
"editor.guides.highlightActiveBracketPair": true,
"editor.guides.highlightActiveIndentation": true,
"editor.guides.indentation": true,
"editor.bracketPairColorization.enabled": true,
"editor.bracketPairColorization.independentColorPoolPerBracketType": true,突出显示事件
在调试和阅读代码时，启用代码中出现的突出显示功能非常有用。
"editor.occurrencesHighlight": true,背景和前景的着色
我还更改了其他组件的颜色，请随意更改
"workbench.colorCustomizations": {
"editor.lineHighlightBackground": "#ff930f",
"editor.lineHighlightBorder": "#9fced11f",
"editorCursor.background": "#ff930f",
"editorCursor.foreground": "#ff930f",
"editorLineNumber.activeForeground": "#A020F0",
"editorLineNumber.foreground": "#5DE23C",
"titleBar.activeBackground": "#000000",
"titleBar.activeForeground": "#F4DB01",
"titleBar.inactiveBackground": "#000000",
"titleBar.inactiveForeground": "#ffffff",
"tab.activeBorder": "#F4DB01",
"terminal.tab.activeBorder": "#F4DB01",
"statusBar.background": "#000000",
"statusBar.debuggingBackground": "#007acc",
"statusBar.foreground": "#F4DB01",
"statusBar.noFolderBackground": "#007acc"
}粘性卷轴
我优先考虑性能而不是精美的 UI，因此我在 VSCode 中禁用了平滑滚动。平滑滚动有时会带来不必要的开销，影响整体性能。
此外，我还提高了快速滚动灵敏度，这使我可以在使用 Alt 键和滚轮时更快地浏览代码。
此外，我发现粘性滚动特别有用，尤其是在处理长文件时。它可以帮助我保持位置感并轻松跟踪我的位置，类似于面包屑在导航中的工作原理。
"workbench.list.smoothScrolling": true,
"editor.fastScrollSensitivity": 5,
"editor.smoothScrolling": false,
"editor.stickyScroll.enabled": true,图标
vscode -icons确实很好而且足够清晰。
你想成为西方最快的牌手吗？使用 vim 键绑定。也许你会问“为什么不使用 vim 来代替，这样你就可以像 Flash 一样快呢？”。答案很简单，vim 非常擅长在没有鼠标的情况下完成任务，但我发现使用交互式 UI 可以更好地完成一些任务，例如 git 冲突解决。而且vim中的配置对于我这样的新手来说是很可怕的。
让我们安装vim 扩展
在开始之前，对 Vim 及其 Visual Studio Code 扩展有一个基本的了解会很有帮助。快速浏览一下Vim 介绍和扩展文档以熟悉这些概念。
在Vim中，主要有三种模式：普通模式、插入模式和可视模式。状态栏方便地显示当前模式，让您轻松掌握编辑状态。这三种模式是您在 Vim 中工作时最常用的模式。
- 插入模式：用于插入。
- 普通模式：用于修改
- 视觉模式：用于选择。
首先，我们将主键映射到空间。您可以将其想象为MacOS 中的⌘。
"vim.leader": "<space>",
Vim 中的按键映射是在 settings.json 文件中使用每种模式的数组进行配置的。
"vim.visualModeKeyBindings": [],
"vim.visualModeKeyBindingsNonRecursive": [],
"vim.insertModeKeyBindings": [],
"vim.insertModeKeyBindings": [],
"vim.normalModeKeyBindingsNonRecursive": []
例如，如果我想按“tt”使用正常模式关闭所有打开的选项卡，我会将其添加到 normalModeKeyBindingNonrecursive 部分
{
"before": ["t", "t"],
"commands": ["workbench.action.closeEditorsInGroup"]
}
或者如果你想缩进，而不是按tab，你可以将它映射到>，你可以这样做
{
"before": [">"],
"commands": ["editor.action.indentLines"]
},keybindings.json中的按键映射
为了消除对箭头键的需要，我们可以在 keybindings.json 文件中创建自定义键映射。您可以通过打开命令面板并搜索“键盘快捷键”来访问此文件。
例如，如果我们想在代码操作中按ctrl j和而不是向下箭头和向上箭头按钮，我们可以这样做：ctrl k
{
"key": "ctrl j",
"command": "workbench.action.quickOpenSelectNext",
"when": "!textInputFocus && inQuickOpen"
},
{
"key": "ctrl k",
"command": "workbench.action.quickOpenSelectPrevious",
"when": "!textInputFocus && inQuickOpen"
},
我还发现切换终端的快捷方式可能很方便。\\是“ ”的 json 字符串转义\。在这种情况下您只需按一下即可Ctrl \。
{
"key": "ctrl \\",
"command": "workbench.action.terminal.toggleTerminal",
"when": "terminal.active"
},
如果您希望向现有按键添加新的按键绑定，但不确定命令 ID，则可以使用按键绑定 UI，然后只需从那里复制命令 ID。
您还可以通过使用 UI 上的“删除键绑定”选项或在命令前添加“-”来删除键绑定。
{
"key": "ctrl u",
"command": "-cursorUndo"
}
使用 Vim 时，您可以使用 jkhl 而不是箭头键来移动。但为了更快的导航，您可以尝试 EasyMotion 扩展。它提供了高级移动选项和快捷方式，可以快速跳转到代码中的特定位置
通过按“ Leader Leader s” “ the char you want to jump to”可以减少很多重复按键。
例如，要使用 EasyMotion 跳转到屏幕上的特定“c”，您可以按引导键两次，然后按“s”，然后按“c”。请记住，如果屏幕上多次出现“c”，您可能需要按其他键来指定要跳转到的位置。
公用事业拖放如果您想禁用笔记本电脑上的触摸板以避免打字时意外拖放，通常可以通过操作系统中的触摸板设置来实现。
"editor.dragAndDrop": false,自动换行
长行是代码味道的标志，我们还使用鼠标在长行中快速导航。但是，我们试图避免在这里使用鼠标和额外的移动。
幸运的是，有一个选项可以换行以避免滚动
"editor.wordWrap": "on"码镜头
代码镜头对于滚动时的快速操作（如调试和运行测试）非常有用。有时可能会有用
"editor.codeLens": true粘贴和保存时格式化
在编辑器中启用自动格式化功能可以省去手动格式化代码的麻烦。通过将其配置为在文件保存或粘贴文本时触发，您可以确保代码的格式一致，而无需额外的击键。
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.formatOnType": false,提示在受信任的工作空间中
当您在本地计算机上工作并且您只想打开一个空文件夹以进行快速实验或记笔记时，工作区信任提示可能会变得有点麻烦。虽然它适用于远程工作空间和特定场景，但您可能会发现它对于常规本地项目是不必要的。幸运的是，您可以禁用工作区信任提示并拥有更顺畅的工作流程而不会中断。
"security.workspace.trust.banner": "never",
"security.workspace.trust.emptyWindow": true,
"security.workspace.trust.enabled": false,
"security.workspace.trust.startupPrompt": "never",扩展
有一些扩展在这里可能有用
Codesnap可让您创建代码图片
传统提交允许您使用预定义的结构进行 git 提交。
Diff可让您比较 2 个文本文件
谢谢
卡丹
指出 VsCode 具有内置的比较功能，可以让您执行相同的操作。此外，下面的 GitLens 扩展还让我们可以将当前提交与之前的提交进行比较。
Markdown linting和Markdown 预览在编写 Markdown 文档时可能会很有帮助。
GitLens不赞助这篇文章，但他们的免费套餐足以让我使用。
Error Lens 为您提供比 VSCode 中默认错误装饰更好的 UI/UX。
