VSCode Code Tour插件：创建代码导览教程-VSCode-PHP中文网

VSCode Code Tour插件：创建代码导览教程

P粉986688829

发布： 2025-12-17 19:32:38

原创

584人浏览过

Code Tour 插件支持创建交互式代码导览教程，所有内容以 JSON 格式 .tour 文件保存于项目中，含 file、line、description 等字段，支持 Markdown、多行高亮、代码执行及离线分享。

vscode code tour插件：创建代码导览教程

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 —— 他们装了插件就能直接播放。

HIX Translate

由 ChatGPT 提供支持的智能AI翻译器

114

查看详情

进阶技巧：复用与自动化

多个 tour 可按场景拆分，比如 setup.tour、api-flow.tour、testing.tour，再用 "include" 字段组合调用。也可以配合 GitHub Codespaces 或 Dev Containers，在环境初始化时自动触发 tour 播放。对于文档型项目，还能用脚本从 JSDoc 注释自动生成 tour 步骤（需简单解析逻辑）。

基本上就这些。Code Tour 不复杂但容易忽略——它不是幻灯片，而是嵌在代码里的“活文档”。写得好，比写 README 更让人愿意点开看。

以上就是VSCode Code Tour插件：创建代码导览教程的详细内容，更多请关注php中文网其它相关文章！