原文地址：dev.to/kinginit/ho...

原文作者：Thomas King

原文发布于：2023 年 11 月 24 日

结对编程可以提高工作效率。但是，没有什么比看到你的程序员同伴在编码中苦苦挣扎更令人讨厌的了。说到 "挣扎"，我并不一定是指他缺乏经验，而是指他的编码速度太慢。这种感觉就像《疯狂动物城》（Zootopia，一部不可错过的电影）中闪电的那一幕。

如何可以不做闪电？这里有一些在 Visual Studio Code (VS Code) 中编码的技巧和窍门。

注意：我没有 Mac，因此这里提到的短键仅适用于 Windows。你可以在这里找到 Mac 版的翻译，但由于我无法在实体 Mac 上重现它们，所以没有将它们包含在本指南中。

更智能地复制和粘贴

我见过有人通过以下方式复制粘贴代码：

将鼠标光标移至单词开头。
按住左键。
一直拖到单词的末尾。
松开左键。
右键单击所选内容。
点击 "复制"。
在 VS Code 的文件资源管理器中滚动，找到目标文件。
单击目标文件。
将光标移至文件中需要的位置。
将光标移至文件中需要的位置。
右键单击目标文件。
单击 "粘贴"。

这个过程有点慢。尤其是当您需要多次使用时...改进复制粘贴的一些方法有：

使用 CTRL + C 复制，使用 CTRL + V 粘贴。
使用 CTRL + SHIFT + 左/右箭头 按单词增加/减少字数选择。
使用 SHIFT + 左/右箭头 按字符增加/减少选择。
在 VS Code 中单击一行代码并按下 CTRL + X 键，将把该行代码放入剪贴板（剪切） 。在任何地方使用 CTRL + V 都会插入该行代码。
使用 ALT + 上/下箭头 可以将一行代码上移/下移。

更智能地导航

使用组合键 CTRL + P 代替手动浏览资源管理器窗格。这样，你就可以按名称搜索文件。这是一种 "智能"搜索，也就是说，它不仅会查找包含搜索文本的单词，还会查找组合词，例如， prodetcon 也会查找 project-details-container.component.ts 。使用 CTRL + P 要比看别人在文件资源管理器窗格中苦苦寻找要快得多，后者本身就是一种痛苦（双关语）。

与其在文件中滚动查找某些代码，不如使用这些组合键：

CTRL + G：转到行
CTRL + F：在文件中搜索（使用 ENTER 键导航到下一个出现的位置）
CTRL + 点击类/函数/等：转到所述类/函数/等的定义。

使用 CTRL + TAB 在上次打开的文件和当前文件之间切换（或继续按 TAB 进一步切换到其他已打开的文件）。这比将光标移动到任务栏，寻找正确的选项卡并单击打开要快得多。

注意：在 VS Code 中，使用这招在打开的文件之间切换是非常有效的。此外，在 Windows 中也可使用 ALT + TAB 在打开的窗口之间切换。

更智能地重新命名

不要在变量的每一个出现的地方去进行重命名。这样做既费时又容易出错。相反，请转到该变量的定义并按下 F2 键，重命名该变量，然后按下 ENTER 键。这将改变每次出现的变量。这不仅适用于变量，也适用于函数、类、接口等。这也会跨文件生效。

使用 Emmet

Emmet 是一款内容/代码辅助工具，用于更快、更高效地编写代码。它成为了 VS Code 的标准配置，因此无需额外安装任何插件。其概念很简单：开始键入一个 Emmet 缩写，按下 TAB 或 ENTER 键，就会出现该缩写的完整 Emmet 代码段。

举个例子，键入 Emmet 缩写 .grid>.col*3 。当您按下 TAB 或 ENTER 时，VS Code 会为您生成整段代码：

Emmet 最酷的一点是，您还可以生成"乱数假文"。例如， ul>li*4>lorem4 将生成一个包含 4 个元素的无序列表，每个列表项包含 4 个随机单词。

使用格式化器

在 VS Code 中使用代码格式器来格式化代码。我强烈推荐使用 Prettier。

使用代码格式化工具的好处之一是，它还能"美化"你的代码。因此，如果你从没有格式的地方复制粘贴代码，你可以点击格式组合键（CTRL + ALT + F），然后你的代码就被"美化"了，更重要的是，它还具有可读性。

注意：保存时应用格式化是个好建议。您可以在设置中进行更改（查找配置中的"Format on save"）。

格式化不仅对你自己有用，对整个团队也很有用，因为它能使团队的代码更加一致。想了解更多相关信息，请参阅我的另一篇文章《在 Angular 项目中执行前端指南》。

使用代码片段

代码片段是一种模板，可让您更轻松地编写重复的代码片段，如 for 循环、while 语句等。

通过使用代码片段，只需输入最基本的内容，就能轻松创建代码块。您可以使用内置的代码片段，也可以使用提供代码片段的扩展，甚至还可以创建自己的片段！

内置语法片段支持提供了许多语言的模板，如 TypeScript、JavaScript、HTML、CSS 等。例如，您可以使用它轻松创建 switch 语句，如上图所示。

VS Code 插件市场有多个扩展，可为您提供代码片段。例如 Angular snippets、Tailwind UI snippets、Bootstrap snippets 等。

最后，您还可以创建自己的片段。你既可以为特定语言创建全局片段，也可以为某个项目创建特定片段。在此我就不详细介绍了，不过您可以查看文档，了解如何创建自己的代码片段。

利用"量子键入"

我把它称为 "量子键入"，因为这确实加快了在 VS Code 中键入代码的速度。这一切都与多行选择有关。当你需要更改或添加文本到多行时，VS Code 允许你通过选择这些行并同时开始键入这些行来实现。

按住 SHIFT + ALT，拖动光标对多行进行选择。你会看到这些行上出现多个打字光标。只需开始键入，文本就会同时添加。

如果您想在多个位置添加相同的文本，但它们不对齐，您可以按住 ALT 不放，同时单击要输入相同文本的所有位置。

您还可以按住 ALT 键，同时选择多个单词。在按住 ALT 键的同时，您只需拖动以选择一个位置，然后释放左键或双击以选择单个单词，而无需单击某个位置。

快速环绕选择

代码经常需要用方括号、圆括号或大括号包围。或者某些内容需要用引号（单引号或双引号）包围。要做到这一点，人们通常会移至起始位置，键入起始括号，然后将光标移至结束位置，键入结束括号。

更有效的方法是先选择需要被包围的部分，然后直接键入起始括号。VS Code 会很聪明地知道需要包围整个部分。

对这些起始括号生效： (、{、[、<、'、和"。

利用 VS Code 的代码重构功能

您可以使用 VS Code 自动重构代码片段。例如，您可以让 VS Code 为您生成 getters 和 setters，而不是自己编写。

要重构某些内容，只需选中需要重构的内容，单击右键，然后点击 Refactor... 或更快：使用 CTRL + SHIFT + R。

VS Code 可以根据您所在的文件类型提供不同重构。例如，对于 TypeScript，您可以使用 Extract function、Extract constant 或 Generate get and set accessors。点击此处查看 TypeScript 的完整列表。

使用正则进行搜索和替换

正则表达式（RegEx）是开发人员工具包中一个非常强大的工具，值得您进一步熟悉。您不仅可以在自己的代码中使用它（如验证模式、字符串替换等），还可以在 VS Code 中使用它进行高级搜索和替换。

例子

您所在的项目中，某些 CSS 选择器以 app- 开始，以 -container 结束。你需要根据新的样式规范进行重命名，他们希望您将后缀 -container 更改为 -wrapper 。您可以尝试进行简单的搜索和替换，查找 -container 并将其替换为 -wrapper ，但是当您进行替换时，您会发现某些不应该被替换的选择符被替换了（例如，名为 .unit-container-highlight 的 CSS 选择符变成了 .unit-wrapper-highlight）。

使用正则，我们可以进行更精细的搜索。使用捕获组，我们可以提取想要保留的单词，同时替换其余的单词。例如使用正则表达式 app-([a-z-]+)-container。我们要替换那些以 -wrapper 结尾的匹配结果。替换后的字符串将显示为 app-$1-wrapper。请确保您勾选了 Use Regular Expression。

注意：尽管使用正则允许更精细的搜索，但在进行实际替换之前，请检查搜索窗格中的结果！

通过允许只对某些文件进行搜索，您可以获得更多控制权。例如，只搜索 HTML 文件（*.html），甚至只搜索整个文件夹（src/app/modules）。

如果您想在搜索前试用正则表达式，以确定它是正确的，请使用在线正则测试器，如 Regex101。如果您没有或几乎没有使用正则的经验，可以看看 regexlearn.com/。

使用工具将单调的工作自动化

有时，我们不得不做一些单调的工作，比如创建模拟数据、为类中的每个字段创建一个函数、根据接口的属性创建 HTML 列表项，等等。俗话说得好

更聪明地工作，而不是更努力地工作！

使用工具将这类单调的工作自动化，而不是自己完成所有繁琐的工作。我经常使用的工具有：

NimbleText：根据给定格式将输入行转换为特定输出。
Mockaroo：生成模拟数据并以多种格式（JSON、CSV、XML 等）输出。
JSON Generator：也能生成模拟数据，但专门针对 JSON。它比较复杂，但可以实现量身定制的结果。

使用 NimbleText 的一个很好的例子就是根据几个字段在 HTML 中创建整个表单。我们有一个字段列表，希望在表单中显示这些字段。每个字段都有一个标签和一个输入。让我们创建一些数据供 NimbleText 转换：

arduino 复制代码

first name, text
last name, text
email, email
street, text
number, number
city, text
postal code, text

这里有 7 行 2 列。每一行代表一个表单字段。第一列是标签名称，第二列是 HTML 输入类型。

在 NimbleText 中，我们确保 data 的设置为：列分隔符 , 和行分隔符 \n。

每个表单字段都应位于类 .form-field 的 div 中，包含一个包含文本的 label 和一个用于表单字段的 input 。在 NimbleText 的 pattern 填入如下内容：

bash 复制代码

<div class="form-field">
  <label for="<% $0.toCamelCase() %>"><% $0.toSentenceCase() %>:</label>
  <input id="<% $0.toCamelCase() %>" type="$1"/>
</div>

当我们看到输出结果时，就会发现已经为我们做了很多工作：

html 复制代码

<div class="form-field">
  <label for="firstName">First name:</label>
  <input id="firstName" type="text"/>
</div>
<div class="form-field">
  <label for="lastName">Last name:</label>
  <input id="lastName" type="text"/>
</div>
<div class="form-field">
  <label for="email">Email:</label>
  <input id="email" type="email"/>
</div>
<div class="form-field">
  <label for="street">Street:</label>
  <input id="street" type="text"/>
</div>
<div class="form-field">
  <label for="number">Number:</label>
  <input id="number" type="number"/>
</div>
<div class="form-field">
  <label for="city">City:</label>
  <input id="city" type="text"/>
</div>
<div class="form-field">
  <label for="postalCode">Postal code:</label>
  <input id="postalCode" type="text"/>
</div>

因此，请发挥创意，尽情使用这些工具。

结论

要在 VS Code 中更快地编码，归根结底是要了解自己的快捷键，并充分利用集成开发环境的强大功能。下面是所提到内容的快速汇总：

使用短键进行复制粘贴。
用搜索代替手动导航，提高导航效率。
使用 F2 重命名，而不是手动重命名。
使用 Emmet。
使用格式化工具来整齐地列出大纲（还有其他优点）。
使用代码片段。
量子键入，就像没有明天一样。
使用 VS 代码重构。
使用 RegEx 进行搜索和替换。
使用 NimbleText 等工具自动处理单调的工作。

希望你喜欢阅读这篇文章。如果您认识的人在编码方面需要帮助，请随时分享这篇文章！

如果您有任何问题，请随时联系我们！谢谢！

[译] 如何更快地编写代码--VS Code 版