VS code扩展开发详解
本文展示,如何开发一个VS code扩展(也称为插件)。
第一步:
在NodeJS环境中安装必备依赖:
npm install -g yo generator-code vsce
第二步:
在命令行中使用刚刚安装的全局Node命令yo创建VS code扩展工程:
根据提示,选项或输入一些信息:
第三步:
打开VS code工程:
等待之前的操作全部完成,会在项目目录中看到生成了许多文件。在VS code中打开该目录,即打开了该扩展工程:
第四步:
测试VS code扩展。
按下F5启动调试,会新打开一个VS code窗口。
在此新窗口中,按下ctrl+shift+p,并输入hello word(本扩展默认名):
在上图中,看到在右下角弹出一行提示。
这正是此扩展的展示功能:
第五步:
开发一个真正的扩展。
功能:调用JShaman平台接口,实现JS代码混淆加密。
核心功能:
修改配置文件,使命令可用:
测试:
运行配置好的命令:
使用效果:
第六步:
发布。
发布后即可从vs code软件的扩展中供全球开发者使用。
首先,进入Azure开发中心:aka.ms/SignupAzureDevOps。
来这里是需要创建令牌,后面发布时需要用到。
创建时配置如下(必须如图,否则无法发布扩展):
创建成功,得到令牌:
再到marketplace.visualstudio.com/manage创建publisher帐号:
注:在此步骤注册帐号时,由于visualstudio市场网站故障,帐号未能注册。:
注:这个错误会导致最后一步发布扩展时出错,但有临时解决办法,且看后文。
最后是打包&发布过程:
先在nodejs中安装vsce:
注:高版本的vsce需要高版本的nodejs,由于本地使用的nodejs是v12版本,因此用了较低版本的vsce。
本地打包:
打包时,需要在package.json中补充publisher键值。打包后,生成vsix文件:
发布:
注:由于前面的步骤中未能注册visualstudio市场账号,这里发布不成功。
后续,会再次尝试去visualstudio注册账号,网站的故障想必不会持续太久。
既然未能发布成功。那么该如何使用此扩展呢?
以前面已经打包生成了vsix文件。在vs code中手动加载此文件即可:
安装成功:
使用:
打开任意js文件,按下ctrl+shift+p,启用扩展功能:
使用起来还是非常方便的。
生成的加密js文件:
最后:在JShaman官网可下载此扩展文件。