如何从零写一个实用的 VS Code 拓展(编辑中)
VS Code 是一个实用的编辑器,它拥有强大的扩展生态系统,允许用户自由安装或发布拓展来增强软件的功能。
本文源自个人的需求,围绕一个实用看板工具拓展的开发,详细讲解如何从零编写并发布属于你自己你的 VS Code 拓展。
发掘需求
当你有需求的时候,首先应该先在 VS Code 的拓展商店中查找符合你需求的拓展,而不必重复造轮子。当你发现别人开发的应用都无法符合你的需求、或者缺少你想要的功能,这时候才应该考虑自己开发一个拓展。
在本文的实例中,我想要有一个看板工具,可以一键将我的 Markdown 文档渲染为简洁的看板视图,以此一览当下的所有任务。但是现成的看板相关的拓展,要么源文件不是基于 Markdown 格式的,要么无法做到实时更新看板的预览页面,甚至它们都不够简洁。总之,没有一款能满足我的需求。所以,我打算自己造一个。
搭建框架
开发拓展的第一步,首先要确保 VS Code 和 Node.js 已经安装在本地,随后使用 npm 安装 Yeoman 和 VS Code Extension Generator,快速生成扩展开发的骨架:
安装完成后,运行命令创建新的扩展:
当提示选择扩展类型时,可以选择“New Extension (TypeScript)”或根据个人偏好选择其他类型。
在自动生成的框架中,有两个比较重要的文件,它们的名字及用途是:
- src/extension.ts:扩展的主要入口点和逻辑实现。
- package.json:定义扩展的元数据和依赖。
开发拓展
测试拓展
在 VS Code 中按 F5
即可运行和调试扩展。实例中,在 Debug 窗口打开一个 Markdown 文件,即可测试拓展是否可用于渲染出一个看板页面
打包并发布扩展
打包拓展,需要安装 vsce 工具:
然后使用 vsce package
打包扩展。
(编辑中)