CodeTour插件支持在VSCode中创建交互式代码导览,涵盖安装、新建导览、添加步骤、播放分享及多导览管理全流程,便于团队知识传递。

如果您希望在VSCode中通过结构化的方式向团队成员展示代码逻辑、功能模块或开发流程,则可能是由于缺乏直观的上下文引导。CodeTour插件提供了一种嵌入式、可交互的代码导览机制,支持逐行注释、路径跳转与步骤回放。以下是使用该插件构建并分享知识导览的具体操作:
本文运行环境:MacBook Air M2,macOS Sequoia。
一、安装并启用CodeTour插件
CodeTour作为VSCode官方推荐的导览工具,需先从扩展市场安装并激活,确保其能识别当前工作区中的代码文件与注释结构。
1、打开VSCode,点击左侧活动栏的扩展图标(四个方块组成的图标)。
2、在搜索框中输入CodeTour,找到由Microsoft发布的官方插件。
3、点击“安装”,安装完成后点击“重新加载”使插件生效。
二、创建首个代码导览
导览以JSON格式存储在工作区根目录下的.tours文件夹中,每条导览包含多个步骤,每个步骤绑定到特定文件与行号,形成可复现的阅读路径。
1、在VSCode中打开目标项目,确保已打开至少一个源码文件。
2、按下Cmd+Shift+P(Mac)调出命令面板,输入并选择CodeTour: Start New Tour。
3、在弹出的输入框中为导览命名,例如API初始化流程,回车确认。
4、光标所在位置将自动成为第一步,输入描述性文字后按Enter提交该步骤。
三、编辑与扩展导览步骤
已有导览可通过命令面板追加步骤,也可直接修改.tours目录下对应JSON文件,实现跨文件、跨函数的逻辑串联。
1、将编辑光标移至另一处关键代码行,如某个配置加载函数内部。
2、再次调用命令面板,执行CodeTour: Add Step to Current Tour。
3、输入说明文本,例如“此处完成环境变量注入”,确认添加。
4、重复操作可插入任意数量步骤,支持在不同文件间自由切换并绑定。
四、播放与分享导览内容
导览可本地播放供个人回顾,也可导出为独立JSON文件供他人导入,无需额外依赖即可还原完整浏览路径与注释。
1、在命令面板中执行CodeTour: Play Current Tour,开始逐帧播放。
2、播放过程中,编辑器自动跳转至各步骤对应位置,并高亮显示当前行及注释气泡。
3、右键点击任意步骤,在上下文菜单中选择Export Tour,保存为.tour.json文件。
4、接收者将该文件放入自己项目的.tours目录后,执行CodeTour: Import Tour即可加载。
五、管理多个导览与标签分类
同一项目可存在多个导览,通过命名区分用途;插件支持为导览添加标签,便于在命令面板中快速筛选与启动。
1、在命令面板中执行CodeTour: Manage Tours,打开导览管理视图。
2、在列表中右键某条导览,选择Edit Tour Metadata。
3、在弹出表单中填写tags字段,例如输入backend, auth(英文逗号分隔)。
4、后续调用播放命令时,可在命令面板中输入标签关键词快速定位相关导览。










