VScode插件制作及发布

0 简介

苦于写代码时没有一个能够实时记录自己代码量的软件/插件，就自己写了记录代码量的VScode插件，正好练练手。

记录一下如何从开发到发布一个VScode插件，以及自己踩的一些坑。

1 环境配置

开发VScode插件需要用到Yeoman和VS Code Extension generator这俩JavaScript库

那么前提条件必然是你的设备上要有node环境，本文不赘述有关node的安装

可以看下这个教程

Node.js安装及环境配置超详细教程【Windows系统】

在平时写代码的目录下打开终端，确保创建的项目你能找到

全局安装依赖，终端输入

npm i yo generator-code -g

如果长时间没反应或无法下载，可以尝试换淘宝源

npm config set registry https://registry.npm.taobao.org

还想了解更多可以参考这篇博客

国内npm源镜像（npm加速下载） 指定npm镜像

2 创建项目

2.1 创建项目

刚刚打开的终端中输入

yo code

创建之后会依次问你7个问题

• 第一项让你选择使用JS开发还是TS，根据个人喜好填写
• 第二项项目名称
• 第三项作者名字
• 项目描述
• github仓库
• 管理依赖项的，可以选webpack
• 包管理器，根据喜好选就行，可以无脑npm

就像这个样子

接着安装项目依赖

npm install

2.2 项目结构

用VScode打开项目大概看下项目文件结构

基本上我们只需要关注图中标出来的俩文件就行，第一个就是你将主要写的代码

但我们先来看下第二个，配置文件，package.json

这个是我最终项目完成后的状态，跟你刚开始不一样不用急。这里主要提几个点：

第一个位置我还彪着黄，不用管。 它下面为什么还有个publisher呢？这个很关键，后文讲，大坑。

第二处标的activationEvents，也就是项目的启动方式，根据自己的需要去查询然后替换，我这里使用的*是指打开VScode就会启动插件。

第三处是你的插件将要使用到的命令，初始状态下会有一个输出Hello World的命令

我们来看下这个怎么用

打开src下的extension.ts

可以看到这里是注册了一个命令，当按下Ctrl+shift+p后输入command中的title就会输出预设的”Hello World“

那么同理，我们需要什么功能就可以在package.json和extension.ts中添加，一个"伟大"的插件就做好了

3 调试

插件写好后按下F5将打开一个新窗口进行调试

4 打包

那么接下来我们就可以将自己写的"伟大"的插件打包并发布了

安装需要用到vsce这个工具

安装vsce

npm install vsce -g --save vsce

打包

vsce package

打包前要注意一定要记得修改README，如果没修改就进行打包，就会报错

打包的时候也会跳出来几个问题，问你要不要继续，反正插件能用，直接一直continue就好

如果正常打包了会在项目根目录下建立一个拓展名为vsix文件，可以先本地装下试试能不能用

5 注册账号

还记得我前面提到package.json中的publisher吗，这个东西在并不会自己创建

如果就这样打包完直接

vsce publish

恭喜你

ERROR Missing publisher name. Learn more: https://code.visualstudio.com/api/working-with-extensions/publishing-extension#publishing-extensions

那么我们这个时候就要首先在package.json里添加

"publisher":"你名"

5.1 注册organization

然后去注册一个"organization"和一个"publisher"账号

先访问https://aka.ms/SignupAzureDevOps，创建一个组织

没弹出上面这个界面就在这创建
左侧的New organization

然后点这个

点New Token

名字可以随便取，但是Organization一定要选All accessible organizations

第三个也随意，最后一个选Full access

创建

给它复制下来，找个地方存着，一会用

然后去 https://aka.ms/vscode-create-publisher

5.2 注册publisher

创建"publisher"账号

只要把第一个填了就好，其他随意

创建好了

6 发布

以上工作都完成了，终于可以发布了，

vsce publish

填写刚才复制的token

完事。

几分钟之后就可以在插件商店搜索到自己的插件了

这个时候注册"publisher"的地方就能看到自己发布的插件了

点进去能看到详细的下载信息

7 我做的插件

那么折腾了这么一顿，我做的就是一个简单通过在不同文件下按下Enter次数来统计代码量的插件

完整代码放github了，[感兴趣可以去看下](Fridemn/code-counter (github.com))

应用商店里插件就叫code-counter,欢迎下载体验

8 总结

总结起来，填写"publisher"以及修改README是两个最莫名奇妙的问题，注意规避