VSCode的Code Tour：创建代码库导览_网络技术_宿州市腾雀网络科技有限公司

发布时间 - 2026-01-04 00:00:00 点击率：次

VSCode的Code Tour扩展支持创建交互式代码库导览，包括安装扩展、初始化.tour文件、添加带注释标记的步骤、手动编辑JSON调整逻辑，以及播放和分享导览。

如果您希望为团队成员或新贡献者提供一个结构化的代码库导航体验，VSCode 的 Code Tour 扩展可帮助您以交互式方式创建分步导览。以下是创建代码库导览的具体操作流程：

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

一、安装 Code Tour 扩展

Code Tour 功能由独立扩展提供，需先在 VSCode 扩展市场中安装官方支持的插件，确保具备创建和播放导览的基础能力。

1、打开 VSCode，点击左侧活动栏中的扩展图标（或使用快捷键 Cmd+Shift+X）。

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

3、点击“安装”按钮，等待安装完成并重启 VSCode（如提示需要）。

每个导览以 JSON 格式的 .tour 文件形式存在，初始化过程会自动创建该文件并关联当前工作区根目录，便于后续编辑与版本管理。

1、按下 Cmd+Shift+P 打开命令面板。

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

3、在弹出的输入框中为导览命名，例如 getting-started，回车确认。

4、VSCode 将在工作区根目录下生成 .vscode/getting-started.tour 文件。

导览步骤需锚定在具体代码行上，通过插入注释标记实现精准定位；每一步骤包含标题、描述及可选代码片段，支持跨文件跳转。

1、打开目标源码文件，将光标置于希望讲解的某一行代码上（例如函数定义首行）。

2、按下 Cmd+Shift+P，执行 Tour: Add Step 命令。

3、在弹出的输入框中依次填写：标题（如“入口函数定义”）、描述（如“这是应用启动时调用的主函数”）。

4、确认后，VSCode 会在该行上方插入形如 // #region tour: getting-started step: 1 的注释块，并自动写入对应元数据。

.tour 文件本质是 JSON，直接编辑可修改步骤顺序、增删步骤、补充代码高亮片段或调整跳转目标，适合精细化控制导览逻辑。

1、在资源管理器中双击打开 .vscode/getting-started.tour。

2、找到 steps 数组，确认各步骤的 file、line、title 和 description 字段是否准确。

3、如需插入中间步骤，可在数组中手动添加新对象，确保 line 值指向有效源码行号。

4、保存文件后，已存在的导览将立即反映变更，无需重启 VSCode。

播放功能提供内嵌式引导界面，支持暂停、跳转与退出；导览文件可随代码库提交，其他用户检出后即可直接运行。

1、打开命令面板，执行 Tour: Play Tour。

2、从列表中选择 getting-started，导览界面将在编辑器右侧滑出。

3、点击右上角 Share 按钮，复制生成的 Markdown 链接或导出为独立 HTML 文件。

4、将链接或文件发送给协作者，对方在相同代码路径下打开即可同步播放。