讲师中心 微信公众号
AI工具推荐 视频效率加速

VSCode的CodeTour插件:创建代码库的导览教程

千强大大_8416

千强大大_8416

发布时间:2025-12-31 13:18:08

|

462人浏览过

|

来源于php中文网

原创

CodeTour插件可创建交互式代码导览:一、安装启用;二、初始化.tour文件;三、添加锚定步骤;四、编辑重排JSON步骤;五、播放分享至Git供协作。

vscode的codetour插件:创建代码库的导览教程

如果您希望为代码库中的特定功能或模块创建结构化的学习路径,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、打开需要讲解的源码文件,将光标置于某一行(如函数定义起始行)。

Expanso json-flatten
Expanso json-flatten

通过 CLI 或 MCP 服务器,使用 Expanso Edge 管道扁平化嵌套 JSON 对象。

下载

2、右键单击编辑器空白处,选择 Add Step to Current Tour。

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。

热门AI工具

更多
Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2215

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

3502

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1176

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

4039

2025.09.10

自建git服务器
自建git服务器

git服务器是目前流行的分布式版本控制系统之一,可以让多人协同开发同一个项目。本专题为大家提供自建git服务器相关的各种文章、以及下载和课程。

6859

2023.07.05

git和svn的区别
git和svn的区别

git和svn的区别:1、定义不同;2、模型类型不同;3、存储单元不同;4、是否拥有全局版本号;5、内容完整性不同;6、版本库不同;7、克隆目录速度不同;8、分支不同。php中文网为大家带来了git和svn的相关知识、以及相关文章等内容。

1940

2023.07.06

git撤销提交的commit
git撤销提交的commit

Git是一个强大的版本控制系统,它提供了很多功能帮助开发人员有效地管理和控制代码的变更,本专题为大家提供git 撤销提交的commit相关的各种文章内容,供大家免费下载体验。

1154

2023.07.24

git提交错误怎么撤回
git提交错误怎么撤回

git提交错误撤回的方法:git reset head^:撤回最后一次提交,恢复到提交前状态。git revert head:创建新提交,内容与之前提交相反。git reset :使用提交的 sha-1 哈希撤回指定提交。交互式舞台区:标记要撤回的特定更改,然后提交,排除已撤回更改。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

4457

2024.04.09

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

60

2026.10.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Python uv官方安装与入门文档
Python uv官方安装与入门文档

共0课时 | 0人学习

Buffalo框架快速入门指南
Buffalo框架快速入门指南

共0课时 | 0人学习

Valgrind支持平台说明
Valgrind支持平台说明

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn