天天看点

VS code插件开发详解

VS code扩展开发详解

本文展示,如何开发一个VS code扩展(也称为插件)。

第一步:

在NodeJS环境中安装必备依赖:

npm install -g yo generator-code vsce

VS code插件开发详解

第二步:

在命令行中使用刚刚安装的全局Node命令yo创建VS code扩展工程:

VS code插件开发详解

根据提示,选项或输入一些信息:

VS code插件开发详解

第三步:

打开VS code工程:

等待之前的操作全部完成,会在项目目录中看到生成了许多文件。在VS code中打开该目录,即打开了该扩展工程:

VS code插件开发详解

第四步:

测试VS code扩展。

按下F5启动调试,会新打开一个VS code窗口。

在此新窗口中,按下ctrl+shift+p,并输入hello word(本扩展默认名):

VS code插件开发详解

在上图中,看到在右下角弹出一行提示。

这正是此扩展的展示功能:

VS code插件开发详解

第五步:

开发一个真正的扩展。

功能:调用JShaman平台接口,实现JS代码混淆加密。

核心功能:

VS code插件开发详解

修改配置文件,使命令可用:

VS code插件开发详解

测试:

运行配置好的命令:

VS code插件开发详解

使用效果:

VS code插件开发详解

第六步:

发布。

发布后即可从vs code软件的扩展中供全球开发者使用。

首先,进入Azure开发中心:aka.ms/SignupAzureDevOps。

VS code插件开发详解

来这里是需要创建令牌,后面发布时需要用到。

创建时配置如下(必须如图,否则无法发布扩展):

VS code插件开发详解

创建成功,得到令牌:

VS code插件开发详解

再到marketplace.visualstudio.com/manage创建publisher帐号:

VS code插件开发详解

注:在此步骤注册帐号时,由于visualstudio市场网站故障,帐号未能注册。:

VS code插件开发详解

注:这个错误会导致最后一步发布扩展时出错,但有临时解决办法,且看后文。

最后是打包&发布过程:

先在nodejs中安装vsce:

VS code插件开发详解

注:高版本的vsce需要高版本的nodejs,由于本地使用的nodejs是v12版本,因此用了较低版本的vsce。

本地打包:

VS code插件开发详解

打包时,需要在package.json中补充publisher键值。打包后,生成vsix文件:

VS code插件开发详解

发布:

VS code插件开发详解

注:由于前面的步骤中未能注册visualstudio市场账号,这里发布不成功。

后续,会再次尝试去visualstudio注册账号,网站的故障想必不会持续太久。

既然未能发布成功。那么该如何使用此扩展呢?

以前面已经打包生成了vsix文件。在vs code中手动加载此文件即可:

VS code插件开发详解
VS code插件开发详解

安装成功:

VS code插件开发详解

使用:

打开任意js文件,按下ctrl+shift+p,启用扩展功能:

VS code插件开发详解

使用起来还是非常方便的。

继续阅读