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

结对编程可以非常高效。但没有什么比看到你的同事编程吃力更让人恼火的了。我说的吃力，不一定是指他缺乏经验，而是指他写代码太慢。这感觉就像《疯狂动物城》（一部必看电影）里Flash的场景一样。

如何避免 Flash？以下是一些在 Visual Studio Code (VS Code) 中编写代码的技巧和窍门。

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

更智能地复制和粘贴

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

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

这个过程有点慢，尤其是需要重复多次的时候……以下是一些提升复制粘贴能力的方法：

使用CTRL + C复制和粘贴。CTRL + V
用于按单词增加/减少CTRL + SHIFT + left/right arrow选择。
使用SHIFT + left/right箭头来按字符增加/减少选择。
在 VS Code 中单击一行代码并按下，该行代码CTRL + X将被放入剪贴板。使用任意位置，该行代码CTRL + V将被插入到该位置。
用于ALT + up/down arrow将一行代码向上/向下移动一个位置。

更智能的复制粘贴也意味着更智能的导航。

更智能地导航

无需手动翻阅资源管理器窗格，只需使用组合键即可CTRL + P。这样，您就可以按名称搜索文件。这是一种“智能”搜索，这意味着它不仅会查找包含搜索文本的单词，还会prodetcon查找组合词，例如project-details-container.component.ts。使用CTRL + P比看到有人费力地翻阅文件资源管理器窗格要快得多，这本身就很麻烦（双关语）。

无需通过滚动来查找文件内部的某些代码，而是使用以下组合键：

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

用于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 的一大亮点是，它还能生成“lorem ipsum”文本。例如，ul>li*4>lorem4它会生成一个包含 4 个元素的无序列表，每个元素包含 4 个随机单词。

使用格式化程序

使用 VS Code 中的代码格式化程序来格式化你的代码。我强烈推荐Prettier。
使用代码格式化程序的好处之一是它还能“美化”你的代码。所以，如果你从某个完全没有布局的地方复制粘贴代码，你可以按下格式化组合键 ( CTRL + ALT + F)，你的代码就被“美化”了，更重要的是，可读性更强。

注意：一个好建议是在保存时应用格式。您可以在设置中更改此设置（找到“保存时格式化”）。

格式化不仅对您自己有用，而且对整个团队也很有用，因为它可以确保团队的代码更加一致。您可以阅读我的另一篇文章《在 Angular 项目中强制执行前端指南》，了解更多信息。

使用代码片段

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

通过使用代码片段，您只需输入最少的代码即可轻松创建代码块。您可以使用内置的代码片段，使用提供代码片段的扩展程序，甚至可以创建您自己的代码片段！

内置的代码片段为多种语言提供了模板，例如 TypeScript、JavaScript、HTML、CSS 等。您可以使用它轻松地创建一个switch语句，例如如上所示。

VS Code 市场中有多个扩展程序可以为你提供代码片段。例如Angular 代码片段、Tailwind UI 代码片段、Bootstrap 代码片段等。

最后，您可以创建自己的代码片段。您可以为特定语言创建全局代码片段，也可以为特定项目创建代码片段。这里就不赘述了，您可以查看如何创建自己的代码片段的文档。

利用“量子打字”

我称之为“量子打字”，因为它确实加快了你在 VS Code 中输入代码的速度。这一切都与多选功能有关。当你需要更改或添加多行文本时，VS Code 允许你通过选中多行并同时开始输入来实现。

按住SHIFT + ALT并拖动多行即可进行选择。您会看到多个键入光标出现在这些行上。只需开始输入，文本就会同时添加。

如果您想在几个地方添加相同的文本，但它们不对齐，您可以按住ALT并单击所有想要输入相同文本的地方。

您还可以ALT同时按住并选中多个单词。无需点击某个位置，只需拖动鼠标选中一个单词，然后松开鼠标左键或双击鼠标即可选中单个单词，整个过程始终按住该ALT键。

快速包围选择

代码通常需要用方括号、圆括号或花括号括起来。或者某些内容需要用引号（单引号或双引号）括起来。为此，人们通常转到起始位置，输入起始括号，将光标移动到结束位置，然后输入结束括号。更高效的方法是选择需要括起来的部分，然后直接输入起始括号。VS Code 足够智能，能够识别需要括起来的整个部分。

这适用于(、、、和。{[<'"

利用 VS Code 重构技能

您可以使用 VS Code 自动重构代码片段。例如，您可以让 VS Code 为您生成 getter 和 setter，而无需自己编写。
要重构某些内容，只需选择需要重构的内容，右键单击，然后单击Refactor...，或者更快速地使用CTRL + SHIFT + R。

根据你所在的文件，VS Code 可以提供多种重构方式。例如，对于 TypeScript，你可以使用Extract function、Extract constant或Generate get and set accessors。TypeScript 的完整重构列表请见此处。

使用 RegEx 搜索和替换

正则表达式 (RegEx) 是开发者工具包中非常强大的工具，值得你花时间去熟悉它。你不仅可以在自己的代码中使用它（例如，验证模式、字符串替换等），还可以在 VS Code 中进行高级搜索和替换。

例子

您正在一个项目中，一些 CSS 选择器以开头app-和结尾-container。根据新的准则，他们希望您将后缀更改-container为-wrapper。您可以尝试进行简单的搜索和替换，查找-container并将其替换为-wrapper，但是当您执行替换操作时，您会发现某些内容被替换了，这本不应该发生（例如，名为的 CSS 选择器.unit-container-highlightbecame .unit-wrapper-highlight）。

使用正则表达式，我们可以进行更细粒度的搜索。使用捕获组，我们可以提取想要保留的单词，同时替换其余单词。正则表达式的形式可以是app-([a-z\-]+)-container。我们希望将结果替换为结尾-wrapper。替换字符串的形式将是app-$1-wrapper。只需确保您选中即可Use Regular Expression。

注意：尽管 RegEx 允许进行更细粒度的搜索，但在进行实际替换之前，仍请检查搜索窗格中的结果！

您还可以通过允许搜索仅应用于某些文件来获得更多控制权。例如，可以仅搜索 HTML 文件 ( *.html)，甚至仅搜索整个文件夹 ( src/app/modules)。

如果您想在搜索之前试用正则表达式以确保其正确性，请使用在线正则表达式测试器，例如Regex101。如果您对正则表达式没有经验或经验不足，请访问https://regexlearn.com/。

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

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

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

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

NimbleText：根据给定的格式将输入作为行转换为特定的输出。
Mockaroo：生成模拟数据并以多种格式（JSON、CSV、XML 等）输出。
JSON 生成器：同样可以生成模拟数据，但专门针对 JSON。它稍微复杂一些，但可以定制结果。

使用 NimbleText 的一个好例子是，基于几个字段用 HTML 创建完整的表单。我们有一个要在表单中显示的字段列表。每个字段都有一个标签和一个输入框。让我们创建一些 NimbleText 需要转换的数据：



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

这里有 7 行 2 列。每行代表一个表单字段。第一列是标签的名称，第二列是 HTML 输入框的类型。
在 NimbleText 内部，我们保留原有的设置（列分隔符,和行分隔符\n）。
每个表单字段都应该位于一个div带有 class 的中.form-field，其中包含一个label带有文本的和一个input用于表单字段的。NimbleText 的模式如下所示：



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

当我们查看输出时，我们发现已经为我们完成了很多工作：



<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 中更快地编写代码，关键在于了解快捷键并充分利用 IDE 的强大功能。以下是所提及内容的简要总结：

使用快捷键进行复制粘贴。
通过搜索而不是手动导航可以更有效地导航。
使用重命名F2而不是手动执行。
使用 Emmet。
使用格式化程序来实现整洁的轮廓（以及其他优点）。
使用代码片段。
量子型，就像没有明天一样。
使用 VS Code 重构。
RegEx 可用于搜索和替换。
使用 NimbleText 等工具来自动化单调的工作。

希望你喜欢这篇文章。如果你认识任何需要帮助提高编程速度的人，欢迎分享这篇文章！

如有任何疑问，请随时联系我们！谢谢！

文章来源：https://dev.to/kinginit/how-to-code-faster-vs-code-edition-4pa