VSCode扩展编写总结(一)环境搭建

昨天突发奇想,写了一个VSCode的扩展(https://www.hoyt-tian.com/vscode-extension-for-gitbook/) ,作为gitbook editor的替代品,摸索过程中总结了一些经验教训,正好记录下来。

准备工作

进行VSCode扩展开发时,除了安装VSCode之外,还需要两个重要步骤:安装相关的工具集和注册Visual Studio Team Services。

注册账号

注册链接:https://www.visualstudio.com/products/visual-studio-team-services-vs , 由于工具集在执行命令时需要用到一个验证token,因此需要先进行账号注册。注册完毕后,生成身份认证的token可以参照这份说明
https://code.visualstudio.com/docs/extensions/publish-extension

工具集安装

VSCode提供了一套完整的工具集,来进行VSCode的扩展开发。主要包括两部分:扩展代码生成器和扩展发布管理器。

先通过命令cnpm install -g vsce安装命令行工具,然后通过vsce create-publisher hoyt-tian创建发布者账号信息。输入用户名、邮箱和注册账号时生成的Personal Access Token,就完成了publisher的创建。

然后再按照这篇文章,https://code.visualstudio.com/docs/extensions/yocode 安装好生extension generator,在最后一步会要求输入publisher的id,就用刚刚创建的id即可。这些填写的内容,稍后仍然可以在package.json中修改。

接着,就可以使用VSCode打开生成的工程了,按F5,就能看到控制台输出的信息了。

扩展开发基础知识

package.json

pacakge.json文件中有很多重要的插件配置项目,最重要的就是main, activationEvents和contributes。

main定义了扩展的入口文件。

activationEvents

activationEvents定义了插件的激活时机。其合法值包括:

  • onLanguage:${language},在编辑特定语言(Javascript, markdown等)时插件被激活
  • onCommand:${command},在用户选择了特定命令后被激活,Mac下按command + p会弹出输入窗口,然后输入>,跟上命令名称就能看到相关的命令列表,当用户选中、点击某个命令时激活。
  • onDebug,在调试时激活
  • workspaceContains:${toplevelfilename},当工作区间包含特定文件时激活
  • onView:${viewId},在特定view窗口中激活
  • *,总是激活扩展

比较常用的是onCommand:${command}的情况,当用户执行某个命令时激活插件。自动生成的hello world扩展就是这种模式。

contributes

Contributes的配置更加复杂。详细的资料可以查看https://code.visualstudio.com/docs/extensionAPI/extension-points ,这里挑重点的介绍一下。

  • commands中可以自定义命令,每一个自定义的command,title属性可以配置该命令的文本信息,command则是在activation时注册的命令id。
  • views可以用来创建自定义的视图,由于vscode目前开放的接口并不多,现在还不能在activity bar上创建新项目,只能以小视图的形式创建边栏的项目。Gitbook-kit的扩展中,当前文档结构树就是通过views创建的。
  • menus定义了各种菜单,位置的menu都在这里统一定义,通过when可以设置menu是否应该显示,menu会关联到对应的command,直接使用command的基本信息。

其他配置项

除了之前几项,packjson中还有一些其他配置项。engines中可以定义vscode的版本要求。categories可以设置exison的分类信息,display name和description则会显示在marketplace的搜索结果中。更多关于vscode的配置项,可以查看https://code.visualstudio.com/docs/extensionAPI/extension-manifest

Show Comments

Get the latest posts delivered right to your inbox.