CodeTour插件可在VSCode中创建结构化、可交互的分步代码导览：一、安装启用；二、创建新导览生成.tour文件；三、添加多文件步骤并绑定代码行；四、保存至.tours/目录并Git共享；五、播放时自动跳转高亮。
如果您希望在VSCode中为团队成员或自己创建结构化、可交互的代码学习路径，则可以借助CodeTour插件实现分步式代码导览。以下是具体操作步骤：
本文运行环境：MacBook Air，macOS Sequoia。
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。
2、在弹出的编辑框中输入该步骤的标题，例如“初始化请求配置对象”。
3、按下Enter后，在下方输入详细说明，如“此处定义默认超时与认证头，避免重复设置”。
4、重复上述操作，在其他文件或同一文件不同位置继续添加步骤，形成完整流程链。
导览数据以JSON格式存储于项目根目录下的.tours子文件夹中，可直接提交至Git仓库，供他人克隆后立即播放。
1、点击VSCode右下角Tour状态栏中的Save Tour按钮（软盘图标）。
2、确认保存路径为项目根目录下的.tours/文件夹，文件名自动匹配导览名称并添加.json后缀。
3、在终端中执行git add .tours/，将导览文件纳入版本管理。
播放模式提供逐帧导航、自动高亮目标代码块及内联说明浮层，降低理解门槛，尤其适用于新人 onboard 流程。
1、在资源管理器中右键点击已存在的.tour文件，选择Play Tour。
2、播放启动后，编辑器自动跳转至第一步所指定的文件与行号，并高亮显示对应代码区域。
3、使用右下角Tour控制栏中的Next按钮推进至后续步骤，或点击Previous返回上一步。
以上就是如何利用VSCode的CodeTour插件制作代码导览？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
680
取消收藏
