如何利用VSCode的CodeTour插件制作代码导览？

CodeTour插件可在VSCode中创建结构化、可交互的分步代码导览：一、安装启用；二、创建新导览生成.tour文件；三、添加多文件步骤并绑定代码行；四、保存至.tours/目录并Git共享；五、播放时自动跳转高亮。

如果您希望在VSCode中为团队成员或自己创建结构化、可交互的代码学习路径，则可以借助CodeTour插件实现分步式代码导览。以下是具体操作步骤：

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

一、安装并启用CodeTour插件

CodeTour是一个由Microsoft官方维护的开源插件，需先在VSCode扩展市场中安装并激活，才能开始创建和播放导览。该插件支持跨文件跳转、注释嵌入与步骤导航，是构建代码上下文教学的关键工具。

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

2、在扩展搜索框中输入CodeTour，找到作者为Microsoft的官方插件。

3、点击“安装”按钮，安装完成后点击“重新加载”以启用插件。

二、创建新代码导览

新建导览将生成一个独立的.tour文件，其中记录了每一步的位置、标题、描述及关联代码行，便于版本控制和协作复用。

1、在VSCode任意打开的代码文件中，右键选择Create New Code Tour。

2、在弹出的输入框中为导览命名，例如api-handling-tour，按回车确认。

3、此时编辑器右下角状态栏出现Tour控件，且当前文件顶部显示新增的tour步骤编号标记。

三、添加导览步骤

每个步骤绑定到特定文件的具体行范围，用于聚焦讲解逻辑片段、关键变量或设计意图，支持多文件穿插组织。

1、将光标置于需讲解的第一行代码上，右键选择Add Step to Current Tour。

jQuery和CSS3超酷3D堆叠式幻灯片特效源码

本特效源码是一款基于jQuery和CSS3插件hubSlider实现的超酷3D堆叠式幻灯片的代码。该幻灯片将各个slide堆叠在一起，利用jquery，CSS3 transforms和transitions来制作上下切换的堆叠幻灯片效果。本代码适用浏览器：搜狗、360、FireFox、Chrome、Safari、Opera、傲游、世界之窗，不支持IE8及以下浏览器。有兴趣的朋友们可以来下载试试吧

229 查看详情

2、在弹出的编辑框中输入该步骤的标题，例如“初始化请求配置对象”。

3、按下Enter后，在下方输入详细说明，如“此处定义默认超时与认证头，避免重复设置”。

4、重复上述操作，在其他文件或同一文件不同位置继续添加步骤，形成完整流程链。

四、保存并共享导览文件

导览数据以JSON格式存储于项目根目录下的.tours子文件夹中，可直接提交至Git仓库，供他人克隆后立即播放。

1、点击VSCode右下角Tour状态栏中的S*e Tour按钮（软盘图标）。

2、确认保存路径为项目根目录下的.tours/文件夹，文件名自动匹配导览名称并添加.json后缀。

3、在终端中执行git add .tours/，将导览文件纳入版本管理。

五、播放已有导览

播放模式提供逐帧导航、自动高亮目标代码块及内联说明浮层，降低理解门槛，尤其适用于新人 onboard 流程。

1、在资源管理器中右键点击已存在的.tour文件，选择Play Tour。

2、播放启动后，编辑器自动跳转至第一步所指定的文件与行号，并高亮显示对应代码区域。

3、使用右下角Tour控制栏中的Next按钮推进至后续步骤，或点击Previous返回上一步。

以上就是如何利用VSCode的CodeTour插件制作代码导览？的详细内容，更多请关注其它相关文章！