vscode怎么新建html文件_不可不知的4个妙招：像高级开发者一样玩转VSCode-CSDN博客

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

图源：unsplash

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

多光标操作

有时，我们可能需要在不同的位置同时键入相同的内容。例如，在下面的代码中，我们想要先为第一、三、五个

标签添加属性class=“odd”，然后为第二、四、六个标签添加属性class="even”。

Lorem, ipsumdolor. Lorem, ipsumdolor. Lorem, ipsumdolor. Lorem, ipsumdolor. Lorem, ipsumdolor. Lorem, ipsumdolor.

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

笔者曾经的做法是：在一个标签中输入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文件中总是包含以下基本结构：

在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": [   "",      "",      "",      "  ",      "",      "",      "",      "