snippets就是碎片。VSCode支持自定义片段。在写代码的时候，可以根据它快速完成一段代码。不仅仅是VSCode，基本上主流的编辑器都支持snipeets。一个功能能得到这么多编辑器的支持肯定是有用的，但是大部分人都不会用到这个功能。之前写过一篇snippets的文章，讲了snippets支持的各种语法和配置方式，但是并没有用这些来做一个真实的case。因此，本文将讲一个真正的snippet，基本上使用snippets的所有语法。如果能独立写出来，就可以说snippets已经掌握了。让我们回顾一下VSCode中片段的语法。基本片段采用这种json格式：{"alpha":{"prefix":["a","z"],"body":["abcdefghijklmnopqrstuvwxyz"],"description":"letter","scope":"javascript"}}prefix是触发前缀，可以指定多个body是插入到编辑器中的内容，支持很多语法description是描述范围有效的语言，如果不指定就是所有语言生效。正文部分是要插入的代码。它支持很多语法，也是一种DSL（领域特定语言）。支持通过1和2指定光标位置："$1xxxx","yyyy$2"可以同时编辑多个光标："$1xxxx$1"可以添加占位符，也可以是默认值："${1:aaa}xxxx","yyyy${2:bbb}"可以提供多个取值选择："${1|卡松、神光、yck|}最帅"也提供了一些变量取值：“当前文件：$TM_FILENAME”，“当前日期：$CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE”和变量的常规替换：“${TM_FILENAME/(.*)\\.[a-z]+/${1:/upcase}/i}"看完基本语法，大家就知道支持什么了。待会儿做一个真实的案例，用一次这些。通过command+shift+p，输入snippets并选择一个范围：snippets有三个有效范围：project、global、language。个人来说，全局层面写的比较多，项目层面和语言层面也可以写。基础讲完了，接下来写一个片段。实际案例最近在做一个vue项目，写了很多router-link，所以封装了一段router-link代码。我们先写一个最简单的版本：{"routerLink":{"prefix":"link","body":["link"],"description":"router-linkjump"}}这个没什么好说的，就是根据前缀补全内容：然后在name,id,linktext添加三个游标，分别为1,2,$3:{"routerLink":{"prefix":"link","body":["$3"],"description":"router-linkjump"}}可以按tab键快速编辑变化的部分：然后添加占位符：{"routerLink":{"prefix":"link","body":["${3:link}"],"description":"router-linkjump"}}其实目标部分也是可选的，这里我们使用多选：有两个选项,是target="_blank"或一个空格。${3|,target=\"_blank\"|}所以片段变成这样：{"routerLink":{"prefix":"link","body":["${4:link}"],"description":"router-linkjump"}}大多数跳转地址都与当前文件名相关，比如XxxYyyZzzList经常跳转到XxxYyyZzzDetail。所以我们默认取当前文件名，并使用TM_FILENAME变量（所有可用的变量都可以在vscode官网查看）：${1:$TM_FILENAME}当前片段：{"routerLink":{"prefix":"link","body":["${4:link}"],"description":"router-linkjump"}}效果是这样的：文件名确实填写了，但是需要填写手动改的，可以填吗？改变之后呢？是的，变量支持transform，也就是正则替换：XxxList.vue需要把Xxx拿出来，然后用Detail拼出来。这样的正则不难写：在js中是这样写的：'XxxList.vue'.replace(/(.*)List\.vue/,'$1Detail')类似snippets，只是用/隔开：${TM_FILENAME/(.*)List\\.vue/$1Detail/iSosnippets变成这样：{"routerLink":{"prefix":"link","body":["${4:link}"],"description":"router-linkjump"}}填写的代码替换为：链接内容我们要使用选中的内容，它也有变量，就是TM_SELECTED_TEXT最后希望标签router-link也可以改，改的时候开闭标签可以一起改。这需要用多个游标编辑，只需指定多个$x为相同的数字即可。<${5:router-link}>效果是这样的：这是最后的snippet，snippet的所有语法都用一次。完整的片段如下，大家可以在VSCode中使用看看，体验还是很爽的：{"routerLink":{"prefix":"link","body":["<${5:router-link}to={name:'${1:${TM_FILENAME/(.*)List\\.vue/$1Detail/i}}',params:{id:${2:id}}}${3|,target=\"_blank\"|}>${4:$TM_SELECTED_TEXT}"],"description":"router-linkjump"}}基本总结所有主流编辑器都支持snippets，即配置代码片段以提高开发效率，VSCode也不例外。这是一个非常有用的功能。VSCode片段支持3个有效范围：全局、项目和语言。我个人用global比较多。它也是一种DSL，支持多种语法，例如指定光标位置、多光标编辑、占位符、多选值、变量和转换变量。指定光标位置：$x多光标编辑：$x$x指定占位符文本：${x:pla??ceholder}指定多选值：${x|aaa,bbb,ccc|}获取变量：$VariableName转换变量：${VariableName/regularity/replacementtext/i}我们写了一个router-linksnippet，综合使用了这些语法，过段时间就好了。能够自己定义snippet，对于提高开发效率很有帮助。如果你还没有写过，不妨今天试试看。
