如何更快地编写代码--VSCode(翻译)

更智能的复制和粘贴

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

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

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

使用 CTRL + C 复制，使用 CTRL + V 粘贴。
使用 CTRL + SHIFT + left/right arrow 增加/减少字数选择。
使用 SHIFT + left/right 箭头按字符增加/减少选择。
VS 代码中单击一行代码并按下 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 代码中，在打开的文件之间切换是非常有效的。此外，在 Windows 中也可使用 ALT + TAB 在打开的窗口之间切换。

更智能的重新命名

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

使用 Emmet

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

例如，Emmet缩写可以是 .grid>.col*3 。当您按下 TAB 或 ENTER 时，VS 代码会为您填写整段代码：

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

使用格式化器

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

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

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

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

使用代码片段

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

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

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

VS Code Marketplace 有多个扩展，可为您提供片段。例如 Angular 片段、Tailwind UI 片段、Bootstrap 片段等。

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

利用 "量子打字"

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

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

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

快速环绕选择

代码经常需要用方括号、圆括号或大括号包围。或者某些内容需要用引号（单引号或双引号）包围。要做到这一点，人们通常会移至起始位置，键入起始括号，然后将光标移至结束位置，键入结束括号。更有效的方法是选择需要被包围的部分，然后直接键入起始括号。VS 代码会很聪明地知道需要包围整个部分。

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

利用 VS 代码重构技能

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

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

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

使用 RegEx 进行搜索和替换

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

示例

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

使用 RegEx，我们可以进行更精细的搜索。使用捕获组，我们可以提取想要保留的单词，同时替换其余的单词。RegEx 可以看起来像 app-([a-z\-]+)-container 。我们要替换结果，使其以 -page 结尾。替换后的字符串将显示为 app-$1-wrapper 。请确保您检查了 Use Regular Expression 。

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

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

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

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

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

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

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

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

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

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

html 复制代码

<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 重命名，而不是手动重命名。
Use Emmet. 用艾美特。
使用格式化工具可实现整齐的提纲（还有其他优点）。
使用代码片段。
量子型，就像没有明天一样。
使用 VS 代码重构。
RegEx 为搜索和替换提供帮助。
使用 NimbleText 等工具将单调的工作自动化。

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

英文原文