codesnippets是代码片段的意思，是vscode提供的根据某个字符串快速完成一段代码的功能，可以提高写代码的效率。vscode的代码片段可以与项目共享。多人开发项目时，可以维护项目级的snippet，通过git共享，提高项目开发效率。让我们仔细看看片段。snippets配置格式如下：{"ForLoop":{"prefix":["for","for-const"],"body":["for(const${2:element}of${1:array}){","\t$0","}"],"description":"Aforloop."}}前缀是触发snippet的前缀，可以通过数组指定多个body来填充编辑器描述的内容是对snippets的描述。body部分可以通过${}指定光标位置、顺序、占位符字符串和可用值。有5种语法。下面分别来看一下：光标跳转：$1$2可以通过$1和$2指定光标位置。填写完snippets的内容后，光标会被置到$1的位置进行编辑。编辑完成后，可以通过tab跳转到$2。例如，这个配置：{"test":{"scope":"javascript,typescript","prefix":"test","body":["$1xxxx","yyyy$2",],"description":"光标跳转"}}作用是：当有多个$1、$2等时，编辑另外一个内容也会同步修改，即vscode的多光标编辑。例如：{"test":{"scope":"javascript,typescript","prefix":"test","body":["$1xxxx$1",],"description":"multi-cursor"}}effectFor:此功能允许快速编辑片段中的可编辑内容。placeholder:${1:placeholder}只是一个光标跳转。虽然可以快速编辑内容，但不知道编辑的部分是什么，所以snippets支持设置placeholder的值。默认情况下，文本会被选中，输入的内容可以被覆盖。例如：{"test":{"scope":"javascript,typescript","prefix":"test","body":["${1:aaa}xxxx","yyyy${2:bbb}",],"description":"光标跳转"}}作用是：optionalvalue:${1|text1,text2,text3|}placeholder就好比给input标签加上placeholder属性，还是需要done手动输入，如果可编辑区有几个可选值，应该换成下拉选择。在片段中，它受支持：${1|text1,text2,text3|}，介于|和|填写以.分割的多个选项。例如：{"test":{"scope":"javascript,typescript","prefix":"test","body":["${1|神说必有光，Kason|}"],"description":"Optionalvalue"}}作用是：variable:$variablename填写模板可编辑位置时，有时需要用到选择值、剪贴板值、文件名、日期等这些信息通过片段中支持的变量检索。例如：TM_FILENAME：文件名TM_CURRENT_LINE：当前行内容CLIPBOARD：剪贴板内容WORKSPACE_NAME：工作空间名称WORKSPACE_PATH：工作空间路径CURRENT_YEAR：当年CURRENT_MONTH：当前月份CURRENT_DATE：当天RANDOM：随机数RANDOM_HEX：6位随机16位数字UUID:uniqueid可以取这些变量的值来填充游标位置，方法是使用$TM_FILENAME,$CURRENT_YEAR。例如：{"test":{"scope":"javascript,typescript","prefix":"test","body":["currentfile:$TM_FILENAME","currentdate:$CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE"],"description":"variable"}}作用是：变量转换：${变量名/匹配正则模式/替换字符串/匹配模式}支持变量填充，但是还不够，因为有些变量的contentof不合适，需要做一些字符串替换，所以snippets只吃了transform的功能。比如abc-123.js文件，我们通过$TM_FILENAME获取文件名，然后去掉后缀转成大写填入${TM_FILENAME/(.*)\\.[a-z]+/${1:/upcase}/i}对文件名TM_FILENAME进行正则匹配(.*).[a-z]+，将组一转为大写返回，匹配方式为忽略大小写（ignore）。{"填写文件名":{"scope":"javascript,typescript","prefix":"filename","body":["${TM_FILENAME/(.*)\\.[a-z]+/${1:/upcase}/i}"],"description":"文件名"}}我们来实验一下效果：可以看到文件名是正确获取的，去掉后缀转换为大写并填写。知道了snippets的作用，那么如何设置snippets呢？snippet的生效范围是多少？snippets的范围command+shift+p打开命令面板，输入snippet，选择configureusersnippets：可以选择创建global，project-wide，Language-widesnippets：打开不同位置的文件添加snippets.语言级别的代码片段只对特定语言有效，这个也可以打包成插件。只需在插件的package.json中配置它：{"contributes":{"snippets":[{"language":"javascript","path":"./snippets.json"}]}}project-wideSnippets添加在项目根目录的.vscode/xxx.code-snippets下。vscode启动时，会读取这些文件，使之在项目范围内生效。当有一些项目级的代码片段可以共享时，将该文件完整提交到远程git仓库，项目成员就可以共享这些片段设置。对于一些模板代码比较多的项目来说，更有意义。SummarySnippets是vscode提供的一个功能，可以快速输入代码片段，提高开发效率。支持光标位置跳转、多光标同时编辑、占位符、可选值、变量、变量转换等功能。灵活使用这些功能函数，可以制作出简单易用的snippet，提高开发效率。Snippets有global、language和project三个有效范围：global是全局设置；language是语言级别的设置，可以进一步封装成插件分享；project在项目范围内，xx.code-snippetsunder.vscode中，可以提交到git仓库，分享给其他成员。灵活使用snippets功能可以提高开发效率，也可以在项目层面共享。我希望这篇文章可以帮助你理解片段。【编辑推荐】复制不翻车：可承受千万级流量的大规模分布式系统架构设计。2021年五款开源游戏化工具数字化转型七大热门趋势三大降温趋势Windows11新预览版22449推送：启动开机动画怎么了？游戏玩家大规模退居Windows7：Windows10暴跌
