vscode 插件开发

应用商店地址: https://marketplace.visualstudio.com/items?itemName=MrLeo.zpm

每个程序猿都有很多自己的代码片段，没到使用的时候都是 Ctrl+C & Ctrl+V 粘过来粘过去，对于一个爱偷懒的程序猿，这样的重复工作能不能减少呢。

工欲善其事必先利其器。vscode 作为优秀的开发工具，给我的日常开发工作提供了极大的便利。其拓展机制更是如此。

于是便想着自己来开发这么个东西来管理自己的代码片段，一方面方便后边自己使用，一方面也能学习下 vscode 的插件开发、发布方法，另一方面要是发布后对其他人有所帮助就更好了。

参考

插件市场 / 插件管理

官方文档

• Your First Extension
  • VS Code 插件开发文档-中文版
• VS Code Extension API
  • when clause contexts
  • Product Icon Reference
• UX Guidelines
  • Views

第三方库

• ‣ - 使用 Vue Reactivity API 开发 VSCode 扩展程序
• https://github.com/vscode-use/utils - @vscode-use/utils 针对 vscode api 进行了二次的封装，提供了大量精简实用的函数，并且让函数名更贴近实际意义，就如 vscode 中的 lodash。

参考工程

• https://github.com/microsoft/vscode-extension-samples
• https://sourcegraph.com/github.com/slidevjs/slidev
• https://sourcegraph.com/github.com/microsoft/codetour
• https://sourcegraph.com/github.com/mxsdev/ts-type-explorer
• https://sourcegraph.com/github.com/Gerrnperl/outline-map

参考文章

• https://github.com/sxei/vscode-plugin-demo - VSCode插件开发全攻略
• 还不会开发 VSCode 插件？看这一篇就够了
• Vscode Webview 示例
• 公司项目开发提效，我用VS Code插件做了什么
• 使用 Webapck 优化 VS Code 插件加载性能
• VSCode扩展通过网页的方式登录

vscode 插件开发、发布主要流程

1. 插件开发前的准备：vscode、nodejs、vscode 插件生产工具、git、微软账号
2. 插件开发：插件构思、官方文档查阅
3. 插件发布：打包、上传、插件市场操作
4. 插件维护：更新迭代后打包、上传、插件市场操作

准备

vscode、nodejs、git、微软账号，这个的准备无需多说。

vscode 插件生产工具：官方推荐使用 Yeoman 和 VS Code Extension Generator。用如下命令安装：

# 插件生成器
npm install -g yo generator-code

至此开发所需的准备已做好。

开发

# 初始化代码
yo code

结果如下：