讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > 开发工具 > VSCode > 正文

利用Code Tour插件为你的VSCode项目创建导览

P粉986688829
发布： 2025-12-12 13:04:48
原创
347人浏览过
Code Tour 是微软出品的轻量 VSCode 插件，通过 JSON 文件在项目中创建可执行交互式导览，支持添加带 Markdown 说明的代码步骤、启动播放、Git 协作与 PR 集成。

code tour 是一个轻量但实用的 vscode 插件，能帮你为项目关键路径、模块结构或新成员上手流程制作可执行的交互式导览。它不依赖外部服务，所有信息以 json 文件形式保存在项目中，便于版本管理与协作。

安装与初始化导览

在 VSCode 扩展市场搜索 Code Tour（作者：Microsoft），安装后重启编辑器。首次使用时，按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS），输入 Code Tour: Create Tour，回车后会生成一个 .vscode/tours/ 目录，并创建首个 tour 文件（如 getting-started.tour）。

添加步骤：聚焦真实代码上下文

打开你要讲解的源文件，将光标定位到某行（比如一个核心函数定义、配置入口或报错高发位置），然后调用命令 Code Tour: Add Step。插件会自动记录当前文件、行号、折叠状态，并弹出输入框让你填写说明文字。支持 Markdown 语法，可加粗、列表、代码片段（用反引号包裹）。

  • 建议每步只讲一个明确目的，例如：“这是 JWT 验证中间件，请求头中的 token 在此处解析”
  • 避免长段落，多用短句 + 行内代码标注，如 authMiddleware.js#L23
  • 可对同一文件添加多个步骤，形成逻辑递进（如从路由入口 → 控制器 → 服务层）

运行与分享导览

通过命令 Code Tour: Start Tour 选择要播放的 tour 文件，VSCode 会在侧边栏打开导览面板，逐条高亮代码并显示说明。支持暂停、跳转、退出。导览过程不修改代码，纯只读引导。

逻辑智能
逻辑智能

InsiderX：打造每个团队都能轻松定制的智能体员工

逻辑智能 145
查看详情 逻辑智能
  • 导览文件是普通 JSON，可直接提交到 Git，新成员克隆后装好插件就能运行
  • 适合嵌入 PR 描述中，例如：“本次重构涉及三处关键改动，详见 .vscode/tours/refactor-v2.tour”
  • 团队可约定命名规范，如 onboarding.tour、api-flow.tour、debug-cache.tour

进阶技巧：提升导览实用性

导览不是文档替代品，而是“带路的人”。可以配合其他能力增强效果：

  • 用 Code Tour: Insert Code Snippet 在说明中插入当前选中代码块，方便对比前后变化
  • 在 tour 文件里手动编辑 when 字段，设置条件触发（如仅当存在 env.local 时显示某步）
  • 结合 Settings Sync 或 Workspace Trust，确保团队成员开启相同插件配置

基本上就这些。不需要写文档、不用搭平台，几步操作就能把“口头讲三遍”的知识，变成点开就看懂的代码现场导览。

以上就是利用Code Tour插件为你的VSCode项目创建导览的详细内容，更多请关注php中文网其它相关文章！

相关标签：
linux vscode js markdown git json windows mac 路由 macos win 中间件 json Token JS git windows vscode macos microsoft linux 重构

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：VSCode的自动保存（Auto Save）功能配置详解 下一篇：VS Code中的IntelliCode：由AI驱动的智能代码补全
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
VSCode中的JSDoc：为你的JavaScript代码生成文档 VSCode通过/**开头的注释块识别JSDoc，支持@param、@returns等标签实现类型提示与参数补全，无需插件即可获得悬停提示和自动补全，配合jsdoc工具可生成HTML文档。
2025-12-12 16:06:58
942
在VSCode中管理你的AWS资源 在VSCode中管理AWS资源需安装官方AWSToolkit扩展，配置命名配置文件或IAMIdentityCenter凭证后，可通过AWSExplorer图形化操作EC2、S3、Lambda、CloudFormation等服务，并支持本地调试、一键部署及多账户切换。
2025-12-12 15:47:40
223
为何我的VSCode启动如此之慢？诊断与解决方法 VSCode启动慢主要由扩展、工作区配置、文件索引和系统资源共同导致；需先用Developer:StartupPerformance分析耗时，再禁用低效扩展、优化排除设置、调整系统环境。
2025-12-12 15:12:07
592
VS Code的Bracket Pair Colorization功能详解 VSCode括号配对着色功能默认开启，为()、[]、{}、等及HTML标签、模板字符串等自动着色，需正确语言模式与版本≥1.70；可通过设置开关、禁用特定语言、启用高亮或自定义主题颜色调整。
2025-12-12 14:47:05
514
Thunder Client：另一款强大的VS Code API测试工具 ThunderClient是VSCode中轻量实用的API测试工具，无需外部环境、开箱即用，支持图形化操作、环境变量、请求保存/导出、历史记录、响应格式化、简易断言及多种鉴权方式，适合前端、后端、测试与产品等高频轻量接口调试场景。
2025-12-12 14:44:03
438
VSCode前端调试秘籍：直接在Chrome中设置断点 VSCode与Chrome调试深度集成需正确配置launch.json并安装官方DebuggerforChrome扩展；关键步骤包括设置webRoot、sourceMapPathOverrides映射源码路径，启动后在ChromeSources面板的localhost>your-site>src下点击行号设断点，VSCode同步高亮。
2025-12-12 14:30:08
704
使用VS Code远程开发树莓派等嵌入式设备 VSCode远程开发树莓派需配置Remote-SSH扩展及树莓派端基础环境：启用SSH、设静态IP、安装必要工具、配置免密登录；本地安装插件后连接IP，即可远程编辑、调试、部署，无需桌面环境。
2025-12-12 14:21:07
350
如何诊断并解决VSCode插件之间的冲突 VSCode插件冲突表现为功能异常、卡顿、高亮失效等，需通过隔离变量、逐个验证、查看日志定位；典型现象包括光标跳转错乱、格式化失效、右键菜单异常及命令重复注册；应优先使用开发者工具、运行扩展列表和配置检查诊断，并按语言支持、格式化、快捷键等场景针对性解决，安装前查阅兼容性、测试核心流程、定期清理无用插件以预防冲突。
2025-12-12 14:14:03
720
用Live Server实时预览你的网页应用 LiveServer通过启动本地HTTP服务（如http://127.0.0.1:5500）实现自动刷新与跨域兼容，避免file://协议限制；VSCode插件安装后右键HTML文件选择“OpenwithLiveServer”即可使用，支持端口自定义、URL复制及CSS热重载。
2025-12-12 13:15:07
977
VS Code中的IntelliCode：由AI驱动的智能代码补全 IntelliCode是VSCode中基于AI的智能代码补全工具，能根据项目上下文、编程模式和高质量开源库预测语义级代码；支持多语言、按项目风格学习，并以⭐标识高置信推荐项。
2025-12-12 13:06:08
217
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部