讲师中心 微信公众号
AI工具推荐 视频效率加速

VSCode的Code Tour:创建代码库导览

阿辰同学_5387

阿辰同学_5387

发布时间:2026-01-04 18:16:58

|

272人浏览过

|

来源于php中文网

原创

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

vscode的code tour:创建代码库导览

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

本文运行环境:MacBook Air,macOS Sequoia。

一、安装 Code Tour 扩展

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

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

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

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

二、初始化首个 Tour 文件

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

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

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

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

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

三、添加导览步骤到指定代码位置

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

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

Markdown Canvas
Markdown Canvas

将Markdown文件转换为美观的HTML页面,适用于Canvas或浏览器查看。用于用户请求渲染、可视化、显示或分享Markdown文件时。

下载

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

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

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

四、编辑 Tour 文件手动调整顺序与内容

.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、将链接或文件发送给协作者,对方在相同代码路径下打开即可同步播放。

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

1995

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2762

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

956

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

3119

2025.09.10

vscode是什么_vscode怎么安装配置
vscode是什么_vscode怎么安装配置

VS Code(Visual Studio Code)是一款免费、开源的跨平台代码编辑器,由微软开发和维护。它被广泛用于软件开发和编程,支持多种编程语言和框架。VS Code 同时提供了丰富的功能和扩展性,使开发者可以高效地编写、编辑和调试代码。

1195

2023.06.30

vscode怎么运行代码
vscode怎么运行代码

vscode是一个运行于MacOS X、Windows和Linux之上的,针对于编写现代Web和云应用的跨平台源代码编辑器;vscode免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2452

2023.07.21

vscode使用的框架介绍
vscode使用的框架介绍

VSCode是一款跨平台代码编辑器,它基于Electron框架和Monaco Editor构建。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

1849

2024.03.14

vscode一般用来写什么语言
vscode一般用来写什么语言

VSCode是一款功能强大的代码编辑器,支持多种编程语言和文件格式。它内置对 JavaScript、Python、Java、C++、TypeScript、HTML/CSS、Go 等语言的支持。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

1707

2024.03.14

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

0

2026.09.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn