使用好visual|使用好visual studio code 用户代码片段(snippet),推荐一个小工具使用好visualstudiocode用户代码片

用户代码片段(snippet)是什么现代IDE首先带来的就是智能语法提示器,vscode也不例外,其用户代码片段功能空前的强大,每种语言都有很多大家分享的snippet插件.
但是,仍然是无法满足我们的需求,比如
1.个人习惯的
2.项目要求的
3.多个设备之间代码端的共享
4.项目组内代码端的共享
5.项目间的用户代码段的切换
等等...
所以今天介绍一个针对于vscode的用户代码段的管理工具
Snippets

VS Code 的代码片段(snippet)管理工具
项目地址: http://alan0405.gitee.io/snip...

能做什么管理本机VS Code 的代码片段(snippet), 并可通过网络将本机代码片段备份到指定的FTP服务器。
通过FTP服务器可以在设备之间共享代码片段。
应用场景

根据个人喜好，自行编写代码片段。
根据项目不同，设计不同的代码片段。
在项目组统一使用，让代码更规范。

特点

快速管理
FTP备份、恢复和共享
目前只支持windows

总览

使用好visual|使用好visual studio code 用户代码片段(snippet),推荐一个小工具

文章图片

运行环境

1. .net framework 4.6.1 2. chrome,firefox,edge 等现代浏览器

安装下载地址
https://snippets-for-vscode-docs.surge.sh/snippets.zip
运行解压后直接运行snippets.exe
Snippets

速度是制胜的关键

创建snippet Snippets不能创建代码片段文件，我们需要在VS Code中创建最初的代码段文件。

点击菜单文件->首选项->用户片段

文章图片

在弹出的选项中找到想要创建的代码段文件，例如javascript.json是js文件用的用户片段。
打开Snippets
直接运行snippets.exe，打开如下的页面。

文章图片

左侧栏中javascript.json即是该代码片段文件，点击它即可开始编辑。

文章图片

点击右侧出现New Snippet开始创建第一个代码片段吧！

文章图片

修改标题为 for loop 在下面代码编辑框中输入

for (let i = 0; i < list.length; i++) { const item = list[i]; }

【使用好visual|使用好visual studio code 用户代码片段(snippet),推荐一个小工具】

文章图片

选中i，点击￥{:},输入1，选中list，点击${:}，输入2，选中item，点击${:}，输入3，即可将i，list和item等变量转换成替换项目

文章图片
点击Save按钮，保存代码片段
试一试在vscode中，新建一个js文件，并输入for loop，即可看到弹出的代码段提示了

VSCode 代码片段基本语法说明

你可以访问vscode官方地址获得更详细的介绍
https://code.visualstudio.com...

一个例子

// 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." } }

prefix 前缀，emmet 触发条件，例如上述片段，输入for loop 时会触发 emmet 提示 body 片段主体，数组形式 description 描述，emmet 提示的显示内容

基本语法

使用 $ 插入用户自定义内容 $number (1-9) 数字的大小表示光标的先后顺序，使用 tab键移动光标位置，多个同序号将出现多个光标，输入相同的内容 $0 表示光标最终位置 ${number: defaultContent} 为插入内容设置默认值 ${number|select1,select2|} 为插入内容提供可选项 $name 或 ${name: default} 插入变量值，若变量名未定义则插入变量名