写好代码是种乐趣：Visual Studio Code Snippets 入门指南

2024-01-07 19:47:13

当我们写代码的时候，有时候会遇到一些重复性的工作，比方说声明变量、打印日志、创建对象等等。这时候，我们就可以借助 Visual Studio Code（VSCode）的代码片段（Snippets）功能，将这些重复性的代码片段定义成一个个模板，下次遇到类似的情况时，只需要输入一段简短的触发词，VSCode 就会自动展开为完整的代码片段，极大地提高我们的开发效率。

什么是 VSCode Snippets？

VSCode Snippets 是一种代码模板，它允许我们定义一段代码片段，并在需要时快速插入到我们的代码中。Snippets 可以通过触发词（Trigger）来激活，触发词通常是一段简短的文本，比如 log 或 for。当我们输入触发词并按下 Tab 键时，VSCode 就会自动展开它为预定义的代码片段。

创建和使用 Snippets

在 VSCode 中创建 Snippets 非常简单，只需按照以下步骤操作：

打开 VSCode 的设置（Ctrl + ,）
在搜索栏中输入 "Snippets"
点击 "新建全局代码片段"
在 "名称" 字段中输入一个唯一的名称，比如 "My Snippet"
在 "前缀" 字段中输入触发词，比如 "log"
在 "代码片段" 字段中输入代码片段，比如 console.log("$1");
点击 "保存"

现在，当你在代码中输入触发词 "log" 并按下 Tab 键时，VSCode 就会自动展开为 console.log("$1"); 代码片段。其中，$1 是占位符，表示光标的位置，我们可以用 Tab 键在占位符之间移动。

进阶技巧

除了基本的创建和使用外，VSCode Snippets 还提供了许多进阶技巧，可以进一步提升我们的开发效率：

变量： 我们可以使用变量在 Snippets 中插入动态值，比如日期、时间或光标所在位置。语法为 $变量名。
选择： 我们可以使用选择来提供多个选项，当 Snippet 展开时，VSCode 会提示我们选择一个选项。语法为 $选择(选项1,选项2,...)。
循环： 我们可以使用循环来重复代码片段一定次数。语法为 $循环(次数)。
注释： 我们可以使用注释来添加注释到 Snippets 中。语法为 /* 注释 */。