不可不知的4个妙招：像高级开发者一样玩转VSCode

本文链接：https://blog.csdn.net/duxinshuxiaobian/article/details/108887890

全文共2980字，预计学习时长8分钟

不可不知的4个妙招：像高级开发者一样玩转VSCode

图源：unsplash

VSCode是我们最常用的代码编辑器之一，熟练使用VSCode能够让我们很大程度上提升编程效率。本文中笔者就将介绍一些VSCode的进阶使用技巧。

不可不知的4个妙招：像高级开发者一样玩转VSCode

多光标操作

有时，我们可能需要在不同的位置同时键入相同的内容。例如，在下面的代码中，我们想要先为第一、三、五个<li>标签添加属性class=“odd”，然后为第二、四、六个<li>标签添加属性class="even”。

<ul>
  <li>Lorem, ipsumdolor.</li>
  <li>Lorem, ipsumdolor.</li>
  <li>Lorem, ipsumdolor.</li>
  <li>Lorem, ipsumdolor.</li>
  <li>Lorem, ipsumdolor.</li>
  <li>Lorem, ipsumdolor.</li>
</ul>

如何使其成为下面的样子呢？

不可不知的4个妙招：像高级开发者一样玩转VSCode

笔者曾经的做法是：在一个标签中输入class="old”，接着将其复制粘贴到别处。后来，笔者学会了多光标输入的技巧，工作效率飙升！

具体来说，当按住键盘上的Alt键（在macOS中则是Option键）时，点击其他区域来创建另一个光标。接着，在键盘上输入的所有内容都会同时出现在每一个光标区域中。

不可不知的4个妙招：像高级开发者一样玩转VSCode

注意：

· Windows：Alt键+鼠标单击

· macOS：Option键+鼠标单击

不可不知的4个妙招：像高级开发者一样玩转VSCode

重命名符号

我们在编写代码或文档时，偶尔会发现一处拼写错误，或是想要修改命名方式，因此通常需要批量变更一个单词。假设有下列一段代码，你想要把以下代码段中所有的foo都改为bar，你会怎么做？

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

如果逐一手动修改，不仅操作繁琐费力，还容易遗漏。这种情况下，我们可以使用VSCode的重命名符号功能。

不可不知的4个妙招：像高级开发者一样玩转VSCode

选中文本并单击右键时，就会出现这一选项。或者你也可以在选中文本后按F2快捷键。

不可不知的4个妙招：像高级开发者一样玩转VSCode

上/下移行

有时我们想要将代码或文本整段向上或向下移动。这时，可以选中文本，接着：

· Windows环境中，按Alt+↑将文本上移；按Alt+↓将文本下移。

· macOS环境中，按Option + ↑将文本上移；按Option + ↓将文本下移。

不可不知的4个妙招：像高级开发者一样玩转VSCode

这些技巧能帮助你快速调整内容的顺序。

不可不知的4个妙招：像高级开发者一样玩转VSCode

用户代码段

编写代码时，我们一直会反复用到一些代码段。例如，HTML5文件中总是包含以下基本结构：

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
</body>
</html>

在JavaScript中编写for-i循环时，我们也总是会用到这些片段：

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

这样的的例子不胜枚举。如果我们在每次使用时都需要手动输入这些片段，效率会十分低下。幸运的是，VSCode提供了自定义自动填充功能。

不可不知的4个妙招：像高级开发者一样玩转VSCode

来看看如何配置VSCode才能实现以上效果。

生成配置文件

VSCode通过读取配置文件来实现上述效果。因此，首先需要生成一个配置文件。可以用以下方式来生成：

· 第一步，打开用以生成配置文件的窗口：首选项（Preferences）->用户代码段（User Snippets）

不可不知的4个妙招：像高级开发者一样玩转VSCode

· 接着，VSCode会弹出下面的窗口：

不可不知的4个妙招：像高级开发者一样玩转VSCode

在这一窗口中，可以选择现有的配置文件并进行修改，或者也可以生成新的配置文件。

· 下面来创建一个新的配置文件。如果选中“新建全局代码段文件（New GlobalSnippets file）”，就可以创建一个全局可用的配置文件。如果选中“新建代码段文件以测试（New Snippets file for 'test'）”，就可以一个创建本地可用的配置文件。这里，创建一个本地可用的配置文件。

· 下一步，你需要为新建的文件命名：

不可不知的4个妙招：像高级开发者一样玩转VSCode

现在新建完成了一个配置文件。

不可不知的4个妙招：像高级开发者一样玩转VSCode

下面的动图涵盖了上述过程，以帮助读者理解：

不可不知的4个妙招：像高级开发者一样玩转VSCode

设置（set-up）

配置文件以JSON格式编写，以下是一个简单的例子：

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

· 首先，“html5 autocomplete”的作用仅在于告诉程序员配置选项是什么，并且你可以按照自己的想法编写这个域。

· 其次，“prefix”: “html5”是定义的快捷指令。在文件中输入html5这个词时，VSCode将会自动为我们完成这一段代码。

· "body": [...]包含了我们需要编写的代码。因为代码可能有多行，所以它以数组的形式呈现。数组中的每个元素就代表了代码中的一行。将上面的数组转换为正常形式的代码，如下所示：

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
</body>
</html>

现在我们有了基本的配置，接下来可以进行测试。

不可不知的4个妙招：像高级开发者一样玩转VSCode

作用域（Scope）

配置文件起效了，但依旧有不足之处。通常只有HTML文件中才会用到html5autocomplete，而在编写JavaScript文件时，不需要这个快捷指令。我们可以在配置文件中详细规定这一配置的作用域，只需要在配置文件中添加"scope":"html"。

不可不知的4个妙招：像高级开发者一样玩转VSCode

效果很好。现在，在JavaScript文件中，这一快捷指令将会自动失效。

光标

现在，重新测试一下自动完成（auto-complete）指令。你发现了什么不足之处吗？

不可不知的4个妙招：像高级开发者一样玩转VSCode

可以看出，当自动完成指令结束后，光标会自动停在代码的末尾。然而，自动完成的代码并不完整，我们还需要在<title>中输入特定的内容。因此，在自动完成之后，如果光标可以停留在<title></title>中间，就再好不过了。要做到这一点，只需要在配置文件中添加一个特殊变量$0。

不可不知的4个妙招：像高级开发者一样玩转VSCode

这样，自动完成代码后，光标就会自动地停留在$0位置。

不可不知的4个妙招：像高级开发者一样玩转VSCode

样例

现在，通过一个新样例来回顾我们所学的内容。我们希望在JavaScript或TypeScript文件中输入字符串fori时，VSCode能够自动完成下列代码：

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

另外，光标应当停留在i < 后，可以写一个如下所示的配置文件：

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

不可不知的4个妙招：像高级开发者一样玩转VSCode