全文共2980字，预计学习时长8分钟
图源：unsplash
VSCode是我们最常用的代码编辑器之一，熟练使用VSCode能够让我们很大程度上提升编程效率。本文中笔者就将介绍一些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>
如何使其成为下面的样子呢？
笔者曾经的做法是：在一个标签中输入class="old”，接着将其复制粘贴到别处。后来，笔者学会了多光标输入的技巧，工作效率飙升！
具体来说，当按住键盘上的Alt键（在macOS中则是Option键）时，点击其他区域来创建另一个光标。接着，在键盘上输入的所有内容都会同时出现在每一个光标区域中。
注意：
· Windows：Alt键+鼠标单击
· macOS：Option键+鼠标单击
重命名符号
我们在编写代码或文档时，偶尔会发现一处拼写错误，或是想要修改命名方式，因此通常需要批量变更一个单词。假设有下列一段代码，你想要把以下代码段中所有的foo都改为bar，你会怎么做？
function foo(){
// ...
}foo();
foo();
foo();
如果逐一手动修改，不仅操作繁琐费力，还容易遗漏。这种情况下，我们可以使用VSCode的重命名符号功能。
选中文本并单击右键时，就会出现这一选项。或者你也可以在选中文本后按F2快捷键。
上/下移行
有时我们想要将代码或文本整段向上或向下移动。这时，可以选中文本，接着：
· Windows环境中，按Alt+↑将文本上移；按Alt+↓将文本下移。
· macOS环境中，按Option + ↑将文本上移；按Option + ↓将文本下移。
这些技巧能帮助你快速调整内容的顺序。
用户代码段
编写代码时，我们一直会反复用到一些代码段。例如，HTML5文件中总是包含以下基本结构：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
在JavaScript中编写for-i循环时，我们也总是会用到这些片段：
for(let i = 0; i < ; i++){
}
这样的的例子不胜枚举。如果我们在每次使用时都需要手动输入这些片段，效率会十分低下。幸运的是，VSCode提供了自定义自动填充功能。
来看看如何配置VSCode才能实现以上效果。
生成配置文件
VSCode通过读取配置文件来实现上述效果。因此，首先需要生成一个配置文件。可以用以下方式来生成：
· 第一步，打开用以生成配置文件的窗口：首选项（Preferences）->用户代码段（User Snippets）
· 接着，VSCode会弹出下面的窗口：
在这一窗口中，可以选择现有的配置文件并进行修改，或者也可以生成新的配置文件。
· 下面来创建一个新的配置文件。如果选中“新建全局代码段文件（New GlobalSnippets file）”，就可以创建一个全局可用的配置文件。如果选中“新建代码段文件以测试（New Snippets file for 'test'）”，就可以一个创建本地可用的配置文件。这里，创建一个本地可用的配置文件。
· 下一步，你需要为新建的文件命名：
现在新建完成了一个配置文件。
下面的动图涵盖了上述过程，以帮助读者理解：
设置（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>
现在我们有了基本的配置，接下来可以进行测试。
作用域（Scope）
配置文件起效了，但依旧有不足之处。通常只有HTML文件中才会用到html5autocomplete，而在编写JavaScript文件时，不需要这个快捷指令。我们可以在配置文件中详细规定这一配置的作用域，只需要在配置文件中添加"scope":"html"。
效果很好。现在，在JavaScript文件中，这一快捷指令将会自动失效。
光标
现在，重新测试一下自动完成（auto-complete）指令。你发现了什么不足之处吗？
可以看出，当自动完成指令结束后，光标会自动停在代码的末尾。然而，自动完成的代码并不完整，我们还需要在<title>中输入特定的内容。因此，在自动完成之后，如果光标可以停留在<title></title>中间，就再好不过了。要做到这一点，只需要在配置文件中添加一个特殊变量$0。
这样，自动完成代码后，光标就会自动地停留在$0位置。
样例
现在，通过一个新样例来回顾我们所学的内容。我们希望在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++){",
"}"
]
}
}
这就是用户代码段的使用方式。这是笔者最喜欢的功能之一，相信它对读者也很有帮助。有了这一功能，告别繁琐方式，编程速度大大提升！
留言点赞关注
我们一起分享AI学习与发展的干货
如转载，请后台留言，遵守转载规范