xmake-vscode插件开发过程记录

最近打算给xmake写一些IDE和编辑器的集成插件，发现vscode的编辑器插件比较容易上手的，就先研究了下vscode的插件开发流程，并且完成了xmake-vscode插件的开发。

我们先来看几张最后的效果图：

语法高亮和自动补全

状态栏

要实现上面的效果，其实并不复杂，首先我们先来简单介绍下，vscode的插件开发的基本流程：

安装插件开发环境

安装cnpm

由于国内环境比较复杂，直接用npm安装也许很慢或者访问不稳定，因此这里先安装了cnpm去默认使用淘宝的镜像源。

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

创建空工程

通过cnpm去安装yo工具，用来创建一个vscode插件的空工程

$ cnpm install -g yo generator-code
$ yo code

大体的源码结构如下：

选择创建项目后有四个输入和一个选择：

• 输入你扩展的名称 xmake-vscode
• 输入一个标志（项目创建的文件名称用这个）xmake-vscode
• 输入对这个扩展的描述
• 输入以后要发布用到的一名称（和以后再发布时候有一个名字是对应上的）tboox
• 是问你要不要创建一个git仓库用于版本管理

创建完成后的空工程，我们可以用vscode直接打开，然后进行调试加载运行下：

加载起来后，敲F1打开命令窗口，运行默认的hello world测试命令：

到此，一个简答的demo插件就搞定了，接下来我们简单介绍下如何发布这个插件到vscode的market上去。

创建发布者

首先我们需要在marketplace.visualstudio.com上注册一个账号，创建一个发布者，这里我取名为tboox

然后，我们需要在自己的账号里面，添加一个Personal Access Token（地址：https://[your name].visualstudio.com/_details/security/tokens，注意Token只显示一次，最好自己保存一份）

接着，我们安装下vsce这个工具，用于vscode的插件工程打包编译和发布。

$ cnpm install -g vsce

安装好vsce后，我们先创建一个发布者，这里为tboox，输入刚刚market账号里面提供的token进行绑定。

$ vsce create-publisher (publisher name)

构建发布

最后，只需要通过下面命令进行打包或者发布就行了，如果仅仅打个本地包，拖入vscode加载测试，可以运行：

$ vsce package

这将会生成一个类似xmake-vscode-0.0.1.vslx的插件包文件，用vscode可直接加载运行。

如果，我们已经开发完了插件，想要发布到market市场，可以执行：

$ vsce publish [version]

这个时候，我们就可以在xmake-vscode on marketplace上看到你的插件了，用户也可以直接通过vscode进行搜索和安装使用。