CodeTour插件可创建交互式代码导览：一、安装启用；二、初始化.tour文件；三、添加锚定步骤；四、编辑重排JSON步骤；五、播放分享至Git供协作。
如果您希望为代码库中的特定功能或模块创建结构化的学习路径，VSCode 的 CodeTour 插件可帮助您以交互式方式编写、运行和共享代码导览。以下是使用该插件创建导览教程的具体操作流程：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装并启用 CodeTour 插件
CodeTour 是一个由 Microsoft 官方维护的开源插件，需先在 VSCode 扩展市场中安装，安装后无需额外配置即可开始使用。
1、打开 VSCode，点击左侧活动栏的扩展图标（四个方块组成的图标）。
2、在扩展搜索框中输入 CodeTour，找到由 Microsoft 发布的官方插件。
3、点击“安装”按钮，安装完成后点击“重新加载”使插件生效。
二、初始化新 Tour 文件
每个导览教程都对应一个独立的 .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。
ECTouch是上海商创网络科技有限公司推出的一套基于 PHP 和 MySQL 数据库构建的开源且易于使用的移动商城网店系统！应用于各种服务器平台的高效、快速和易于管理的网店解决方案，采用稳定的MVC框架开发，完美对接ecshop系统与模板堂众多模板，为中小企业提供最佳的移动电商解决方案。ECTouch程序源代码完全无加密。安装时只需将已集成的文件夹放进指定位置，通过浏览器访问一键安装，无需对已有
3、在弹出的输入框中填写该步骤的说明文字，例如 这是用户认证流程的入口函数。
4、按回车确认，当前步骤即被写入当前 .code-tour 文件中。
四、编辑与重排 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。
