第一步: 安装扩展生成器

npm install -g yo generator-code vsce

第二步: 初始化一个 Hello World 扩展

yo code

图来自 CN-VScode-Docs 网站

按提示, 输入扩展名, ID, 描述 等信息, 然后等待安装完成~

第三步: 测试一下扩展

1. 打开 VS Code，选择"文件 > 打开文件夹"，选择你刚刚生成的项目目录
2. 直接按下 F5 或 切换到 VSCode 的调试面板, 点击 Debug 按钮，然后点击开始
3. 新的 VS Code 实例会运行在一个特殊环境中 (Extension Development Host), 也就是会打开多一个 VSCode 窗口
4. 按下 Shift + Ctrl + P (Mac OS ⇧⌘P)，输入命令 Hello world
5. 右下角会提示一个 Hello World~ 恭喜！你的第一个 VS Code 插件成功了

图来自 CN-VScode-Docs 网站

第四步: 打个包发给别的同学玩下

vsce package             记得 修改 README.md 文件, 不然会提示没有准备好 README.md

执行此命令没有报错的情况下, 会生成一个 .vsix 的文件, 这个就可以发给别的同学体验了, 当然你还可以使用其他命令将扩展打包发布到微软 VSCode 市场~

第五步: 安装 扩展

在 VS Code 中 按下 Shift + Ctrl + P (Mac OS ⇧⌘P)，输入命令 Install from VSIX 选择本地的 .vsix 文件, 提示安装成功, 重新加载一次, 即可生效~

坑位：

扩展里面的 webview 不支持 sessisonStorage，否则会因为安全问题报错。

参考

https://www.bookstack.cn/read/CN-VScode-Docs/md-%E6%89%A9%E5%B1%95-%E8%8C%83%E4%BE%8B-%E8%B0%83%E8%AF%95%E5%99%A8.md

最新文章

1. Python3.5+selenium操作Chrome浏览器
2. Hibernate第一个例子
3. [官方作品] 关于ES4的设首页问题
4. 5、HTML5列表、块和布局
5. svg-filter高斯模糊
6. opencv中，c和c++版本区别体验
7. 基于jQuery 常用WEB控件收集
8. The document has been modified outside of Code Composer. Would you like to reload the file
9. appendGrid
10. php给一张图片加上水印效果
11. 四、 添加模型Model（ASP.NET MVC5 系列）
12. [leetcode-572-Subtree of Another Tree]
13. linux学习之路－－（四）文件，目录管理
14. linux下c程序 daemon、fork与创建pthread的顺序问题
15. Spring3.0学习1.1（模拟spring）
16. Redis数据持久化
17. OpenCV学习(38) 人脸识别(3)
18. pyDay14
19. POJ - 3254 Corn Fields（状压DP）题解
20. linux-2.6.22.6内核启动分析之Makefile文件

热门文章

1. sql server<> != 从数据类型varchar转换为numeric 时出错
2. hadoop基础学习
3. 全栈框架——MEAN
4. C# 分割URL地址
5. 什么是JSON ？
6. 百面机器学习--跟课Task整理
7. 打包c++项目
8. 配置thinkphp项目遇到的坑
9. Vue学习之路第十五篇：v-if和v-show指令
10. 轻量级Java EE开发框架设计系统应用架构