面向高级用户的 VSCode 提示和技巧

已发表: 2022-03-11

为什么我想成为 Visual Studio 高级用户？

成为超级用户是保持领先的另一种方式。 开发人员经常谈论他们如何保持领先地位，以及他们如何不断学习新事物并继续磨练自己的技能。 这是一个经常被问到的面试问题，因为雇主往往更喜欢致力于扩大技能组合的人才。 掌握您的 IDE 和您的计算机可能是您职业发展的最佳投资之一。

开发人员一直在寻找可以让他们更好地工作的新博客。 无论您使用什么 IDE，它都可能有一个博客：订阅！

另一个原因是它只是节省时间。 花时间改进您的工作流程可以带来更高的生产力或更多的时间来享受乐趣。 今天，我们将仔细研究 Visual Studio 和 VSCode，并讨论提高技能以成为高级用户的方法。

值得花时间吗？
（资源）

如何成为 VSCode 高级用户？

以下是普通用户与高级用户的区别：

  • 深入了解你的 IDE： VSCode 有优秀的文档，阅读吧！
  • 定制：高级用户定制他们的工作流程以满足他们的特定需求。
  • 自动化所有无聊和重复的任务。
  • 不断改进您的工作流程并跟踪您的 IDE 的发展。

在这篇文章中，我打算解释我是如何自己解决这些问题的，并为你提供知识，让你自己去做。 我所做的不一定适合你，至少不完全适合。 人们在不同的环境和项目中工作（对我来说，主要是在 Windows 上使用 React.js 和 TypeScript），但总体方法对每个人都有效。

用 Jest 进行测试

我一次编写一个测试，这意味着我需要一种方法来一次运行一个测试。 但是，本机正则表达式解决方案非常笨拙。 这就是我使用 Jest Runner 的原因。 这个有用的扩展允许您执行或调试单个套件或测试。

下面的视频显示，您需要做的就是右键单击测试名称并使用上下文菜单来运行它。

用 Jest 进行测试

使用 Pact 进行测试

编写合同测试最耗时的部分可以说是匹配。 我通过创建有用的片段来自动执行重复操作来解决这个问题。 这些是我制作的，请随意使用（即，只需将它们复制粘贴到 VSCode 的/snippets/typescript.json ）。

下面的视频展示了如何使用这些片段：

  1. 选择所有出现的相同类型，即选择所有字符串、时间和其他值。
  2. 使用预定义的键绑定，或调用Insert Snippet并选择相关的片段，或者只是开始输入您要使用的片段的前缀。

使用 Pact 进行测试

吉特

大多数开发人员每天都使用 Git 和 GitHub，我也是。但是，我尽量避免使用终端或 github.com。

GitHub Pull Requests and Issues 允许我在 VSCode 中轻松打开、编辑和审查 PR。 我发现我的 IDE 比 GitHub 的 Web 或桌面应用程序更适合审查代码。 一些开发人员可能不同意，但我很欣赏在我的 IDE 中这样做的一致性和舒适性。

吉特

Git 可以做很多事情，但我记住的命令却很少。 但是为什么首先要记住任何东西呢？ 记住你日常工作的太多细节方面并不会太有成效。

GitLens 在您的指尖展示了大量令人惊叹的功能。 多亏了它，我很少需要到达终端才能使用 Git。

吉特镜头

终端定制

无论您使用哪种操作系统，您都可以比默认终端做得更好。 我正在使用 Windows 终端 + cmder。 如果您是 Unix 用户，请查找 iTerm (macOS) 或 Oh My Zsh（Linux 和 macOS）。 我已经将它们与 VSCode 集成并添加了许多别名（快捷方式），从而节省了我编写命令的时间。

例如：

  • ys = yarn start - 帮助我启动一个只有两个字符的应用程序
  • del=RMDIR /S/Q $* && echo "Deleted Successfully!!!" - 删除提供的目录并在完成后显示成功消息
  • gdab = git branch | grep -v "master" | xargs git branch -D gdab = git branch | grep -v "master" | xargs git branch -D - 删除除master以外的所有本地分支

在这里和那里保存一些字符可能看起来很愚蠢，但从长远来看，这些节省时间的功能加起来。 我发现了使用别名的第二个优势——花更少的时间输入它们可以帮助我保持专注并且不会失去思路，因为我不想记住如何调用命令。

代码生成

创建一个新的组件、页面等是我经常做的事情，而且很简单，大多数读者都知道。 但是创建一个新文件夹并在其中初始化文件可能很乏味。 所以，我自动化了这个过程。

下面的视频显示了使用中的 Supercharge React。 使用New Component ，我可以指定新组件的名称和位置。 然后扩展程序运行一个脚本，该脚本创建一个文件夹并初始化这个新组件。

代码生成

智能感知

VSCode 拥有强大的 IntelliSense，而且大多数时候，你不必考虑使用它。 但是，当您浏览建议时，您可以按Ctrl+Space查看有关每个可用选项的文档。

IntelliSense 可以额外定制，以适应您的工作流程和个人偏好。

智能感知

键盘快捷键

我确定您使用诸如Ctrl+S和Ctrl+F之类的快捷方式。 它们都有很好的文档记录，如果您对 VSCode 的大量快捷方式不太熟悉，我建议您更改它并加倍努力来掌握它们。 某个绑定太笨重？ 您召唤的命令通常需要很长时间才能输入？ 打开 VSCode 的键盘编辑器以创建快捷方式。

如果您想知道某个命令是否已分配给某个组合键，请单击搜索栏中的键盘按钮，您可以在其中记录击键。 然后，您将看到什么/如果命令已与它们相关联。

键盘快捷键

鼠标快捷键

开发人员经常被告知要提高工作效率，他们需要学会讨厌鼠标而喜欢键盘。 如果您正在处理小而密集的文件，这可能是有效的。 但是在自动代码格式化和包含数百行代码的文件的时代，我认为这更像是一个例外而不是规则。

我不仅积极使用鼠标，而且还使用 Logitech Options 对其进行了自定义以适应我的工作流程。 我对鼠标上的特殊键进行了编程，以在 VSCode 中执行某些命令。

以下是如何“教”鼠标做更多的事情，而不仅仅是移动光标并单击：

  1. 从右上角的菜单中选择 VSCode。
  2. 单击要自定义的按钮。
  3. 从左侧的操作列表中选择按键分配。
  4. 在 VSCode 中输入预定义的快捷方式。

鼠标快捷键

备份和同步设置

如果您无法备份并在再次需要时重新使用它，那么定制任何东西就没有多大意义。

本机解决方案目前仅供内部人员使用。 但是，设置同步可帮助您将代码设置保存为 Gist，并允许您在多台机器之间同步工作流程。 你需要一个 GitHub 令牌来配置它，但之后，你只需要运行一个命令来上传和下载你的设置。

推荐的 VSCode 扩展

我已经提到了几个扩展并解释了我如何使用它们。 以下是一些值得注意的提及：

  • 环绕：需要将一些选定的代码包装在箭头函数或 try-catch 块中？ 此扩展程序将为您完成！
  • 搜索 node_modules：即使您没有从 VSCode 的资源管理器中排除node_modules以提高性能，该文件夹也很大，无法导航。 此扩展程序可让您搜索您正在寻找的任何内容，而不是无休止地滚动。
  • Glean 和 React Refactor 为您的 JSX 文件提供了一些有用的重构工具。
  • 自动关闭标签会自动为 HTML/JSX/TSX 文件添加结束标签。
  • File Utils：一种创建、复制、移动、重命名和删除文件和目录的便捷方式。 它也是可定制的。
  • JavaScript Booster 会自动执行一些常见的重构操作。

概括

不要成为普通用户。 而是成为高级用户。 总是比其他人走得更远，看看它会把你带到哪里。 始终注意效率低下并尝试减轻它们。

大多数开发人员应该熟悉我的解决方案：看板。 每次我发现让我慢下来的事情时，我都会把它写成待办事项。 每当我有空闲时间时，我都会尝试找到解决方法。

看板

如果您发现这篇文章不知所措并且不知道从哪里开始，请阅读文档，它将为您提供最佳投资回报率！ 我知道阅读官方文档听起来很无聊，但我保证从长远来看它会有所回报。 它不仅会教您如何提高工作效率，而且您将学习如何编写文档。

为了方便起见，我编制了这份文档必读部分的列表：

  • 提示和技巧：有些是显而易见的，你可能已经知道了，但我可以保证你会发现一些你不知道的东西。
  • 编辑技巧：这些编辑技巧非常强大，学习它们将使您每天受益。
  • 收缩/扩展代码：当您与另一个开发者配对时，试试这个快捷方式，给他们留下深刻印象！
  • 键绑定：了解键绑定的工作原理以及如何自定义它们，这是掌握 IDE 的基石之一。
  • 支持数百种编程语言：了解 VSCode 针对您选择的语言有哪些特定功能。