如何在 Visual Studio Code 中创建代码片段

在 VSCode 中创建自定义代码片段的方法其实很简单。

点击菜单 “查看”-“命令面板” 或者按 command + shift + P 快捷键打开命令选项板。搜索 “Preferences: Configure User Snippets” 或者 “首选项:配置用户代码片段”。

你可以选择现有的代码片段文件或者创建代码片段文件，其中创建代码片段文件有两个选项：全局可用和当前项目目录可。

我们这里以新建全局代码段文件为例，单击“新建全局代码片段文件…”。 创建 .code-snippets 后缀的文件。我们可以看到一个大的对象 {} ，查看注释中示例示例：

"Print to console": {
"scope": "javascript,typescript",
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}

其中：

Print to console 是代码片段名称；

scope 字段表示作用域，在什么语言下其作用；

prefix 字段为代码片段前缀，定义如何从IntelliSense和选项卡完成中选择此代码段。

body 即代码片段的主体内容，其中每个字符串表示一行;

description 字段为代码片段说明，会在 IntelliSense 候选栏中出现。未定义的情况下直接显示对象名，上例中将会显示 Log output to console。

body 中如何定义

body 部分可以使用特殊语法结构，来控制光标和要插入的文本，其支持的基本结构如下：

Tabstops：制表符

用“Tabstops”可以让编辑器的指针在 snippet 内跳转。使用 $1，$2 等指定光标位置。这些数字指定了光标跳转的顺序，数字最大表示默认选中，按 tab 键，光标移到下一个指定位置。特别地，$0表示最终光标位置。相同序号的“Tabstops”被链接在一起，将会同步更新，比如下列用于生成头文件封装的 snippet 被替换到编辑器上时，光标就将同时出现在所有$1位置。

"#ifndef $1"
"#define $1"
"#end // $1"

Placeholders：占位符

“Placeholder” 是带有默认值的”Tabstops”，如 ${1：foo} 。“placeholder”文本将被插入“Tabstops”位置，并在跳转时被全选，以方便修改。占位符还可以嵌套，例如${1:another ${2:placeholder}}。

比如，结构体的 snippet 主体可以这样写：

struct ${1:name_t} {\n\t$2\n};

作为“Placeholder”的 name_t 一方面可以提供默认的结构名称，另一方面可以作为输入的提示。

Choice：可选项

“Choice”是提供可选值的“Placeholder”。其语法为一系列用逗号隔开，并最终被两个竖线圈起来的枚举值，比如 ${1|one,two,three|} 。当光标跳转到该位置的时候，用户将会被提供多个值（ one 或 two 或 three ）以供选择。

通常情况这些功能基本够用了，当然 Visual Studio Code 中创建代码片段还有很多高级用法，这里不再展开，请查看官方文档： https://code.visualstudio.com/docs/editor/userdefinedsnippets