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官网可下载此扩展文件。