跳转至

如何从零写一个实用的 VS Code 拓展(编辑中)

VS Code 是一个实用的编辑器,它拥有强大的扩展生态系统,允许用户自由安装或发布拓展来增强软件的功能。

本文源自个人的需求,围绕一个实用看板工具拓展的开发,详细讲解如何从零编写并发布属于你自己你的 VS Code 拓展。

发掘需求

当你有需求的时候,首先应该先在 VS Code 的拓展商店中查找符合你需求的拓展,而不必重复造轮子。当你发现别人开发的应用都无法符合你的需求、或者缺少你想要的功能,这时候才应该考虑自己开发一个拓展。

在本文的实例中,我想要有一个看板工具,可以一键将我的 Markdown 文档渲染为简洁的看板视图,以此一览当下的所有任务。但是现成的看板相关的拓展,要么源文件不是基于 Markdown 格式的,要么无法做到实时更新看板的预览页面,甚至它们都不够简洁。总之,没有一款能满足我的需求。所以,我打算自己造一个。

搭建框架

开发拓展的第一步,首先要确保 VS Code 和 Node.js 已经安装在本地,随后使用 npm 安装 Yeoman 和 VS Code Extension Generator,快速生成扩展开发的骨架:

npm install -g yo generator-code

安装完成后,运行命令创建新的扩展:

yo code

当提示选择扩展类型时,可以选择“New Extension (TypeScript)”或根据个人偏好选择其他类型。

在自动生成的框架中,有两个比较重要的文件,它们的名字及用途是:

  • src/extension.ts:扩展的主要入口点和逻辑实现。
  • package.json:定义扩展的元数据和依赖。

开发拓展

测试拓展

在 VS Code 中按 F5 即可运行和调试扩展。实例中,在 Debug 窗口打开一个 Markdown 文件,即可测试拓展是否可用于渲染出一个看板页面

打包并发布扩展

打包拓展,需要安装 vsce 工具:

npm install -g vsce

然后使用 vsce package 打包扩展。

(编辑中)