码迷,mamicode.com
首页 > 其他好文 > 详细

五步完成一个 VSCode 扩展(插件)开发

时间:2019-02-02 13:04:25      阅读:476      评论:0      收藏:0      [点我收藏+]

标签:color   stack   ocs   rom   一个   shift   五步   没有   href   

第一步: 安装扩展生成器

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 文件, 提示安装成功, 重新加载一次, 即可生效~

 

 

参考

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

 

五步完成一个 VSCode 扩展(插件)开发

标签:color   stack   ocs   rom   一个   shift   五步   没有   href   

原文地址:https://www.cnblogs.com/linr/p/10348117.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!