一、前言
使用vscode过程中，代码补全是不是让你撸起代码来如有神助。社区环境中现有的代码补全插件，如Element UI Snippets，让你使用ElementUi过程中更加得心应手。
可一旦没用现成的，撸起代码来是不是就痛苦多了，现在手把手教你撸一个vscode Snippets。
二、准备工作
- 安装node
- 全局安装yo generator-code，npm install -g yo generator-code
三、开发
- yo code 生成基本文件，类似于npm init。
选择new code Snippets。 - 然后回车，填写一些插件相关信息，此处不做详细描述。
- 开发目录结构
在snippets文件下开发补全代码，详细规则请看他人博文传送门，此处不做搬运。同时编辑package.json文件中的contributes，如上图所示。 - 调试
按f5或者点击vscode侧边栏debug，然后运行，会打开一个新的vscode窗口，新建对应格式的文件即可调试。
- 代码补全插件的开发到此结束了，接下来说一下如何使用及发布。
四、使用
- 使用前需要先打包，执行vsce package命令，会生成一个*.vsix文件，这样就可以本地安装了。也可发送给小伙伴一起使用。
- 但总是手动传也不是个事啊，所以，接下来，我们需要将其发布到vscode商店。
五、发布
注意，创建publisher以及上传插件需要翻墙，否则会创建失败。
网上找了一下发布教程，发现太老了，严重脱节，通过摸索研究之后，整理出来发布流程。
- 打开Visual Studio Code Marketplace，然后点击右上角Publish extensions按钮，如果没有登录，需要创建一个微软账号（不做详细介绍）。
- 填写publisher相关信息。
只有name和id必填，其余可不填。 - 创建账号成功后，点击new extension按钮，选择visual studio code选项，会跳出来一个上传插件弹窗。
- 把之前打包出来的*.vsix上传到社区即可，这样大家就都可以看到并下载使用你的vscode Snippets了。
六、其他
这里，我做了一个naiveUi的代码补全，在vscode商店搜索naiveUi即可看到，欢迎下载安装体验，git地址。如果有什么问题，也可留言或者提issue，我会及时更改。