手把手教你撸一个vscode Snippets（代码补全），包括发布到商店。

一、前言

使用vscode过程中，代码补全是不是让你撸起代码来如有神助。社区环境中现有的代码补全插件，如Element UI Snippets，让你使用ElementUi过程中更加得心应手。
可一旦没用现成的，撸起代码来是不是就痛苦多了，现在手把手教你撸一个vscode Snippets。

二、准备工作

1. 安装node
2. 全局安装yo generator-code，npm install -g yo generator-code vsce
   说明：vsce本地打包工具

三、开发

1. yo code 生成基本文件，类似于npm init。
   
   选择new code Snippets。
2. 然后回车，填写一些插件相关信息，此处不做详细描述。
3. 开发目录结构
   
   在snippets文件下开发补全代码，详细规则请看他人博文传送门，此处不做搬运。同时编辑package.json文件中的contributes，如上图所示。
4. 调试
   按f5或者点击vscode侧边栏debug，然后运行，会打开一个新的vscode窗口，新建对应格式的文件即可调试。
5. 代码补全插件的开发到此结束了，接下来说一下如何使用及发布。

四、使用

1. 使用前需要先打包，执行vsce package命令，会生成一个*.vsix文件，这样就可以本地安装了。也可发送给小伙伴一起使用。
2. 但总是手动传也不是个事啊，所以，接下来，我们需要将其发布到vscode商店。

五、发布

注意，创建publisher以及上传插件需要，否则会创建失败。

网上找了一下发布教程，发现太老了，严重脱节，通过摸索研究之后，整理出来发布流程。

1. 打开Visual Studio Code Marketplace，然后点击右上角Publish extensions按钮，如果没有登录，需要创建一个微软账号（不做详细介绍）。
2. 填写publisher相关信息。
   
   只有name和id必填，其余可不填。
3. 创建账号成功后，点击new extension按钮，选择visual studio code选项，会跳出来一个上传插件弹窗。
4. 把之前打包出来的*.vsix上传到社区即可，这样大家就都可以看到并下载使用你的vscode Snippets了。

六、其他

这里，我做了一个naiveUi的代码补全，在vscode商店搜索naiveUi即可看到，欢迎下载安装体验，git地址。如果有什么问题，也可留言或者提issue，我会及时更改。