🏹 ⛷️ 👥 VS Code中的专业工作：4个技巧 🍘 🌽 💆🏼

VS Code是当今最受欢迎的代码编辑器之一。周到的使用此编辑器的方法可以显着提高程序员的生产率。本文提供了一些专业使用VS Code的技巧。希望这些技巧会有所帮助。

1.使用多个光标

程序员可能需要在多个地方同时输入相同的文本。

例如，在下面的代码中，您将属性添加class=«odd»到第一个，第三个和第五个元素<li>。在第二，第四和第六个元素中，您需要添加一个attribute class=«even»。

<ul>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
</ul>

这就是编辑器中的外观。

编辑器中的代码

如何解决此问题？我以前是这样做的：我class=«odd»在一个地方输入了类似文本的内容，然后将其复制到剪贴板中，然后将其粘贴到需要的地方。但是，在了解了在VS Code中使用多个游标的功能之后，我就停止了这样做。这大大提高了我的工作效率。

特别是，我们正在谈论以下内容。要在文本中添加多个光标，您需要按住Alt键盘上的一个键（在macOS中为keyOption），然后单击光标应出现的位置。之后，无论有光标在哪里，从键盘输入的所有内容都会同时出现。

使用多个光标

让我提醒您，我们在谈论以下键盘快捷键：

Windows ：Alt+ 。
MacOS ：Option+ 。

2.重命名实体和“重命名符号”命令

现在让我们学习另一个简单的技巧。

输入代码或文档文本时，单词拼写可能会遇到错误。或者，也许您需要在代码中应用新的实体命名约定。在这种情况下，必须同时处理多条线。

假设我们有一个类似于以下代码的代码。我们需要全部替换foo用bar。怎么做？

function foo(){
  // ...
}
foo();
foo();
foo();

如果您手动更改每行，则此方法有两个缺点：

体力劳动过多。
错误的可能性很高。

要解决此问题，可以使用上下文菜单命令Rename Symbol。

使用“重命名符号”

菜单命令右键单击所选文本时，将调用此菜单。调用此命令的另一种方法是F2在选择要编辑的文本后按。

3.上下移动选定的行

有时您需要在文档中上下移动某种程序代码或纯文本。这个问题可以这样解决：

选择文字。
在Windows上，我们将使用键盘快捷键Alt+ 将文本向上移动。要分别向下移动文本，请使用键盘快捷键Alt+ 。
在macOS上，密钥Alt是key Options。

这就是它的样子。

上下移动文本

使用这种方法，您可以快速轻松地更改文本的顺序。

4.片段

在编写代码时，我们经常需要从键盘输入相同的重复结构。

例如，HTML5文件始终包含以下基本文档结构：

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
</head>
<body>
</body>
</html>

在JavaScript中编写循环时，我们总是输入以下代码段：

for(let i = 0; i < ; i++){
  
}

还有更多类似的例子。如果您必须手动输入这些代码段，那么在需要它们时都必须这样做，因此效率很低。

幸运的是，VS Code为我们提供了一种可配置的自动完成机制。这就是它的样子。

自动

补全让我们讨论如何设置VS Code并获取上图中所示的内容。

▍创建配置文件

要在VS Code中设置自动完成功能，必须首先创建一个适当的配置文件。编辑器使用适当的机制读取此文件。为了创建此文件，您需要转到菜单，如下图所示Code > Preferences > User Snippets。

用户片段菜单命令

将出现以下面板。

用于片段的面板

在这里，您可以选择现有的配置文件并进行编辑。您也可以在此处创建新的配置文件。我们将这样做。

在此处选择命令New Global Snippets file将创建一个全局可用的配置文件。如果选择view命令New Snippets file for 'test'，将创建一个文件，该文件在当前工作空间中本地可用。

我们将创建一个本地文件。

选择命令后，New Snippets file for 'test'系统将询问文件名。

输入新

文件的名称我们已经创建了一个配置文件，但是到目前为止它是空的。

新的空配置文件

为了方便起见，我记录了上述整个过程，并在此处将其作为动画gif文件呈现。

创建一个新的配置文件

sn创建片段

配置文件以JSON格式存储数据。这是其内容的示例。

配置文件的内容

相同，只是纯文本：

{
 "html5 autocomplete": {
  "prefix": "html5",
  "body": [
   "<!DOCTYPE html>",
      "<html lang=\"en\">",
      "<head>",
      "  <title></title>",
      "</head>",
      "<body>",
      "</body>",
      "</html>"
  ]
 }
}

首先，让我们看一下这个领域«html5 autocomplete»。该字段的含义仅是告知程序员该代码段的用途。您可以在此处添加任何内容。

现在让我们通过领域弄清楚«prefix»: «html5»。它旨在描述我们设置的缩写，编辑器将其扩展为代码片段。当我们在编辑器中输入文本时，编辑html5器会自动将其替换为元素中指定的内容«body»。

元件«body»: […]包含编辑器应插入文档中的代码，而不是我们输入的前缀。由于此代码可以包含多行，因此此字段由数组表示。数组中的每个元素都是一行代码。如果我们将刚刚考虑的结构“翻译”为普通的HTML代码的语言，那么事实证明它等效于以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
</head>
<body>
</body>
</html>

现在我们有了一个简单的配置文件，让我们对其进行测试。

测试配置文件

▍范围摘要

我们确保我们的配置文件允许自动完成。但这有一个缺点。事实是，前缀表示的构造html5仅在HTML文件中使用。我们不需要JavaScript文件中的此构造。

在这种情况下，指定代码段范围的功能非常有用。即，我们正在谈论«scope»: «html»需要添加到代码段描述中的字段。

将代码段的范围限制为HTML文件。

让我们再次尝试我们的系统。让我们尝试html5HTML文件和JS文件中的前缀。

在HTML和JS文件中测试代码段

如您所见，在JS文件中，输入html5不会导致任何特殊情况。这正是我们所需要的。

▍游标

让我们在刚刚创建的文件上尝试自动完成。让我们仔细看看。有任何缺陷吗？

自动完成输入的调查您

可以看到，将代码块插入编辑器后，光标会自动移至该块的末尾。但是自动插入到文档中的代码块只是空白，仍需要进行处理。特别是，您需要输入标签的内容<title>。

如果将光标自动定位在标签的打开和关闭部分之间，则使用我们的输入完成机制会更加方便<title>。

为此，我们可以在配置文件中使用特殊的构造$0。这就是它的样子。

设置光标位置

现在，代码在文档中之后，光标会自动定位在配置文件中的位置$0。

光标位于所需位置

▍例子

现在，为了增强我们刚刚学到的内容，我们来看一个新示例。

我们希望在JavaScript或TypeScript文件中输入文本后fori自动显示以下结构：

for(let i = 0; i < ; i++){
}

还有-这样光标将自动定位在之后i <。

您现在不必看这个问题的解决方案。尝试自己解决。

通常，此问题的解决方案可以由以下配置文件表示：

{
 "for-i loop": {
    "prefix": "fori",
    "scope": "javascript, typescript",
    "body": [
      "for(let i = 0; i < $0; i++){",
      "}"
    ]
 }
}

这是一个演示。

使用前面的代码

段这种方式使用代码段。我已经谈论了很多，因为片段是我最喜欢的VS Code功能之一。我认为这对您也很有用。以前，当我遇到重复的代码片段时，我不得不从已经包含它们的文件中复制它们。这是一个缓慢的过程，容易出错。现在，由于能够将代码片段格式化为片段，因此输入重复代码片段的任务变得更加容易。

VS Code在日常工作中有哪些功能可以帮助您？

VS Code中的专业工作：4个技巧