snippet-composer：给代码片段加点魔法

导读

snippet 在软件工程领域可译为代码片段，虽然你可能很少有机会编写它，但你一定会在代码编辑器上使用过它。它要么直接集成到编辑器中，要么以插件的形式来进行扩展。就以笔者经常使用的 vscode 为例，在做网页开发时，会安装HTML Snippets、Javascript Snippets等插件，如果使用到框架还会安装框架对应的插件，这些插件内置的代码片段可以极大提高开发效率。

“你可能没有自己编写过代码片段但是你一定享受过代码片段带来的便利性。”

本文以 vscode 为例，指出了代码片段在 vscode 中应用的局限性，即代码片段与代码片段之间没有建立联系，它们是相对孤立的，这导致了当需要编写更复杂更贴近实际业务的代码片段时会遇到困难，而后为了解决这一问题，笔者设计实现了一个用于组合代码片段的工具包：snippet-composer。

vscode 中的 snippet

下面，我们将简要介绍一下 vscode 中代码片段的相关概念和用法，这里只介绍本文提及的部分概念，详细的说明参见官方文档。

• 基本语法，vscode 中的代码片段语法遵循 TextMate snippet 语法 ，但是不支持执行内置的 shell 代码和\u的用法。 一个代码片段可以使用一个json格式的文件来描述，其键为代码片段的名称，值为描述代码片段的对象。其中必选字段prefix对应了代码片段的触发词；必选字段body是代码片段的主体内容，其值可以为字符串或数组，数组中每个元素对应一行代码；可选字段description用于描述代码片段；可选字段scope为代码片段的作用域。

// in file 'Code/User/snippets/javascript.json'
{"For Loop": {"prefix": ["for", "for-const"],"body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],"description": "A for loop.","scope": "javascript,html"}
} 

• Tabstops，可译为制表位，决定了在插入代码片段后光标在片段中停留的位置，若有多个制表位可以使用编号排序，通过 Tab 键来切换制表位，在用户输入内容时编号相同的制表位会被同步更新。其语法为$1，$2，也可给定默认值和可选值，如${1:another ${2:placeholder}}，${1|one,two,three|}。$0较为特殊，它决定了最终光标的位置。* 变量，语法为$name或 ${name:default}，只能使用 vscode 预定义的变量，如，> * TM_SELECTED_TEXT 当前选中的文本或空字符串

• TM_CURRENT_LINE 当前行的内容
• CURRENT_SECONDS_UNIX 自 Unix 纪元以来的秒数
• RANDOM 6 个随机 Base-10 数字
• BLOCK_COMMENT_START 示例输出：PHP/*或 HTML