Code Tour 插件支持创建交互式代码导览教程，所有内容以 jsON 格式 .tour 文件保存于项目中，含 file、line、description 等字段，支持 markdown、多行高亮、代码执行及离线分享。
vscode 的 Code Tour 插件能帮你把代码变成可交互的导览教程，适合新人上手、团队知识沉淀或开源项目引导。它不依赖外部服务，所有内容以纯文本文件（.tour）保存在项目中，版本可控、开箱即用。
安装与基础配置
在 VSCode 扩展市场搜索 “Code Tour”，安装由 microsoft 官方维护的插件（图标为蓝色指南针）。重启后，右键编辑器任意位置或命令面板（Ctrl+Shift+P）输入 Code Tour: Create Tour 即可新建一个 tour 文件。默认生成的 my-tour.tour 是 json 格式，含 steps 数组，每步指定文件路径、行号和说明文字。
写一个实用的导览步骤
每个 step 至少包含 file、line 和 description。支持 Markdown 语法，可加代码块、链接或表情符号提升可读性。例如：
{ "file": "src/main.ts", "line": 12, "description": "这里是应用入口。✅ `createapp()` 初始化 vue 实例，注意传入的根组件是 `App.vue`" }
- 行号支持范围（如
"line": [5, 8]），高亮多行逻辑块 - 用
"before" / "after"字段插入前置或后置提示，比如提醒先运行npm install - 加
"code": "console.log('test')"可在当前上下文执行小段代码（需开启实验性功能）
启动与分享导览
打开 tour 文件，点击右上角 ▶ Play Tour 按钮，或按 Ctrl+Shift+P → Code Tour: Start Tour。VSCode 会自动跳转到对应文件和位置，聚焦代码并显示气泡说明。支持暂停、跳步、重播。导览过程完全离线，发给同事只需把 .tour 文件一起提交到 git —— 他们装了插件就能直接播放。
进阶技巧：复用与自动化
多个 tour 可按场景拆分，比如 setup.tour、api-flow.tour、testing.tour，再用 "include" 字段组合调用。也可以配合 github Codespaces 或 Dev Containers，在环境初始化时自动触发 tour 播放。对于文档型项目，还能用脚本从 JSDoc 注释自动生成 tour 步骤（需简单解析逻辑）。
基本上就这些。Code Tour 不复杂但容易忽略——它不是幻灯片，而是嵌在代码里的“活文档”。写得好，比写 README 更让人愿意点开看。