VSCode的CodeTour插件：创建代码库的导览教程_网络技术

发布时间 - 2025-12-31 00:00:00 点击率：次

CodeTour插件可创建交互式代码导览：一、安装启用；二、初始化.tour文件；三、添加锚定步骤；四、编辑重排JSON步骤；五、播放分享至Git供协作。

如果您希望为代码库中的特定功能或模块创建结构化的学习路径，VSCode 的 CodeTour 插件可帮助您以交互式方式编写、运行和共享代码导览。以下是使用该插件创建导览教程的具体操作流程：

本文运行环境：MacBook Air，macOS Sequoia。

一、安装并启用 CodeTour 插件

CodeTour 是一个由 Microsoft 官方维护的开源插件，需先在 VSCode 扩展市场中安装，安装后无需额外配置即可开始使用。

1、打开 VSCode，点击左侧活动栏的扩展图标（四个方块组成的图标）。

2、在扩展搜索框中输入 CodeTour，找到由 Microsoft 发布的官方插件。

3、点击“安装”按钮，安装完成后点击“重新加载”使插件生效。

每个导览教程都对应一个独立的 .code-tour 文件，该文件以 JSON 格式存储步骤信息，并与当前工作区绑定。

1、确保已打开目标代码库所在的 VSCode 工作区。

2、按下 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS），调出命令面板。

3、输入并选择 CodeTour: Create Tour 命令。

4、在弹出的输入框中为新导览输入名称，例如 Getting Started with Auth Module，回车确认。

导览步骤通过锚定具体文件、行号和注释内容构成，每一步都会在用户播放时自动跳转至对应位置并显示说明。

1、打开需要讲解的源码文件，将光标置于某一行（如函数定义起始行）。

2、右键单击编辑器空白处，选择 Add Step to Current Tour。

3、在弹出的输入框中填写该步骤的说明文字，例如 这是用户认证流程的入口函数。

4、按回车确认，当前步骤即被写入当前 .code-tour 文件中。

.code-tour 文件本质是可编辑的 JSON，直接修改可调整步骤逻辑顺序、增删步骤或更新描述文本。

1、在资源管理器中展开 .vscode/tours/ 目录，找到对应名称的 .code-tour 文件。

2、双击打开该文件，在 steps 数组中查看所有步骤对象。

3、拖动步骤对象在数组中的位置，即可改变播放顺序；删除某个对象即移除该步骤。

4、保存文件后，已启动的 Tour 播放会自动同步最新结构。

完成编辑后，可通过内置播放器运行导览，也可将 .code-tour 文件随代码库一同提交，供其他开发者复用。

1、右键点击任意代码行，选择 Start CodeTour 启动当前 Tour。

2、使用播放控件（上/下箭头、暂停、跳转）控制导览进度。

3、将生成的 .code-tour 文件提交至 Git 仓库根目录或 .vscode/tours/ 子目录下。

4、其他协作者克隆仓库后，只要安装了 CodeTour 插件，即可直接右键启动同名 Tour。