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

用户代码片段(snippet)是什么

现代IDE首先带来的就是智能语法提示器,vscode也不例外,其用户代码片段功能空前的强大,每种语言都有很多大家分享的snippet插件.

但是,仍然是无法满足我们的需求,比如

1.个人习惯的
2.项目要求的
3.多个设备之间代码端的共享
4.项目组内代码端的共享
5.项目间的用户代码段的切换

等等...

所以今天介绍一个针对于vscode的用户代码段的管理工具

Snippets

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

能做什么

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

应用场景

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

特点

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

总览

运行环境

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中创建最初的代码段文件。

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

2. 在弹出的选项中找到想要创建的代码段文件，例如javascript.json是js文件用的用户片段。

   打开Snippets

3. 直接运行snippets.exe，打开如下的页面。

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

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

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

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

7. 选中i，点击￥{:},输入1，选中list，点击${:}，输入2，选中item，点击${:}，输入3，即可将i，list和item等变量转换成替换项目
   
8. 点击Save按钮，保存代码片段
9. 试一试在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} 插入变量值，若变量名未定义则插入变量名