vscode-snippets从开发到发布一条龙，技师小佘为您服务！~~

先放老婆，XDM提刀吧！！！！

什么是vscode-snippets

顾名思义就是vscode上的代码片段，开发过程中大量的代码重复，无需copy，输入快捷键快捷生成

举个栗子(vue代码快捷生成):

1. 新建个vue文件，敲上快捷命令可以是XDM/XSWL/耗子尾汁当然这些都可以自己定
   

2. 啪，很快啊！回车一敲，uniapp vue模版代码生成啦！！！
   

业内优秀的拓展 Vue VSCode Snippets

1. Vue VSCode Snippets 下载量高达100w+
   
2. 模版支持 （vue、Template、Script、Vuex、Vue Router等等）
   

不仅能快捷生成html代码还能js方法、vueAPI、Vue Router、vuex、react等等代码块极大的提高了我们的开发效率

让我们在本地show起来

1. 打开vscode mac command+shift+p
   

2. 选择片段 js模版
   

3. 然后CV一下代码大功告成。

   {
           "js template": {
                   "prefix": ["demo1", "demo2"],
                   "body": [
                           "console.log('你可真帅')",
                   ],
                   "description": "create a js frame"
           }
   }
   复制代码

   • js template 是片段名称。

   • prefix 定义一个或多个快捷键（demo1，demo2）

   • body 需要快捷生成的代码片段

   • description 是 该片段的描述。

   

怎么写模版片段呢？

        其实就是跟我们原来写代码一样，把我们想快捷生成的代码丢上去即可，以及有一些高级用法比如设置光标位置、占位符、变量等等片段语法传送门 。

        现在我们知道了怎么写，怎么在本地跑起来，那么我们要怎么才能发布到vscode市场让小伙伴们一起玩呢?

如何发布将自己的片段发到vscode市场呢

1.全局安装依赖

vsce 包管理工具

npm install -g vsce
复制代码

项目脚手架

npm install -g yo generator-code
复制代码

2.快速创建项目

yo code
复制代码

选择new code snippets

按提示输入包名、描述等等生成项目

3.获取个人访问令牌

1. 首先，在 Azure DevOps登录 Azure DevOps 中创建您自己的组织

2. 选择 ” 新建组织”

   

3. 创建组织成功

   

4. 创建项目

   

5. 从组织的主页选择个人访问token：

   

• 设置token名字

• 将组织设置为所有可访问的组织

• 可选择延长其到期日

• 将范围设置为自定义，然后选择市场 > 管理范围

  

生成Token成功

4.创建发布者

执行vsce login 命令

vsce login <publisher name>
复制代码

输入之前创建的token

5.开发snippets且发布

vsce publish    //拓展发布
vsce publish 2.0.1  //拓展发布至指定版本
vsce publish minor   //自动增加扩展版本
vsce unpublish (publisher name).(extension name) //取消发布扩展
复制代码

6.敲重点的一节来了package.json属性含义讲解

2. package.json 文件图解

• version(红色区域)：版本号每次有修改且需要发布时一定要修改版本号不然发不上去（此坑踩过）
• engines(蓝色区域)：最低vscode版本号支持，就是vscode1.28.0版本以上的才能使用此拓展
• repository(黄色区域): 远程仓库地址
• contributes(白色区域): snippets配置项可设置language、以及aliases设置别名等等