一篇文章,带你了解CodeTour与入门指导

简介: 一篇文章,带你了解CodeTour与入门指导

CodeTour(代码之旅)是微软官方开发的 VS Code 扩展,允许记录和回放代码的演练和思路。

简介

CodeTour 是一个 VS Code 插件,允许记录和回放代码库的演练和思路。我们通常都是通过代码注释或者文档来解释某段代码或方法的功能及逻辑,这样的方法相对简便,但是对阅读的人来说还不够友好,CodeTour 允许我们为代码添加备注,并且将这些备注串联起来,动态地展示我们的思路以及代码逻辑。

就像一个目录,可以轻松地加入到新的项目/功能,并且可视化错误报告或了解代码审查/PR 更改的上下文。"code tour"只是一系列交互步骤,每个步骤都与特定目录或文件/行进行关联,并包括对相应代码的描述。开发人员可以 clone 一个仓库,然后立即开始学习,而无需参考 CONTRIBUTING.md 文件或依赖他人的帮助。

CodeTour 是一个 Visual Studio Code 扩展,它允许您录制和播放代码库的引导式演练。它就像一个目录,可以更轻松地加入(或重新加入!)到新的项目/功能区域,可视化错误报告,或理解代码审查/PR更改的上下文。“代码导览”只是一系列交互式步骤,每个步骤都与特定目录或文件/行相关联,并包含相应代码的描述。这允许开发人员克隆存储库,然后立即开始学习它,而无需参考文件和/或依赖他人的帮助。游览可以签入存储库,以便与其他贡献者共享,也可以导出到“游览文件”中,该文件允许任何人重播相同的游览,而无需克隆任何代码来执行此操作!

项目地址:https://github.com/microsoft/codetour

入门

录制

单击树视图中的 + 按钮 CodeTour(如果它可见)或运行 CodeTour: Record Tour 命令。这将启动 CodeTour并输入此处编辑者的名字,这时候我们可以开始打开文件,单击要注释的行的“注释栏”,然后添加相应的描述。添加任意数量的步骤,完成后,单击停止。

录制时,CodeTour 树状视图将显示当前录制的预览,以及当前的一组步骤。可以知道当前正在进行哪个 tour 的录制。

如果需要在录制时编辑或删除步骤,单击 ... 步骤描述旁边的菜单,然后选择适当的操作,也可以从 CodeTour 树视图中查找编辑/删除步骤。

工作区

在录制时,系统会要求选择要将 tour 文件保存到的文件夹。这是必要的,因为 tour 作为文件写入工作区,需要明确 tour 应保存到哪个文件夹。

步骤标题

默认情况下,CodeTour 树使用以下显示名称格式显示每个游览步骤:

1. # 步骤-文件名
2. #<stepNumber> - <filePath>
  1. 右键单击 CodeTour 树中的步骤并选择 Change Title
  2. 支持 Markdown 语法,可以使用任何标题级别。例如,如果添加一个描述以 ### Activation 开头的步骤,步骤和树视图将如下所示:

选择文本

默认情况下,每个步骤都与创建注释的代码行相关联,但是,如果想调出特定范围的代码作为步骤的一部分,只需在添加步骤之前突出显示代码(单击 Add Tour to Step 按钮),所选内容将作为步骤的一部分被捕获。

调整录制步骤

在录制时,添加的每个新步骤都将附加到录制的末尾,可以通过执行以下操作之一按顺序上下移动现有步骤:

  • 将鼠标悬停在 CodeTour 树中的步骤上,然后单击向上/向下箭头图标
  • 右键单击 CodeTour 树中的步骤并选择 Move Up 或 Move Down 菜单项
  • 单击 ... 步骤注释 UI 中的菜单,然后选择 Move Up 或 Move Down

如果想在录制中间添加一个新步骤,只需导航到要在其后插入新步骤。

代码块

可以将 Markdown 代码块添加到步骤的正文内容,则 CodeTour 播放器将 Insert Code 在其下方呈现一个链接,该链接允许查看器自动将代码片段插入当前文件中与步骤关联的行,使得 CodeTour 创建交互式教程或示例变得容易。

Shell 命令

为了更简单地将 shell 命令嵌入到一个步骤中(例如执行构建、运行测试、启动应用程序),CodeTour 支持一个特殊的 >> 符号,在后面紧跟想要运行的 shell 命令(例如 >> npm run compile)。这将被转换为一个超链接,当点击该链接时,将启动一个新的集成终端并运行指定的命令。

开启 Tour

要开始预览,只需打开包含一个或多个 tour 的代码库。通过以下任意一种方法都可以开始一个 tour:

在活动选项卡的 CodeTour 视图中选择 Explorer

运行CodeTour: Start Tour 命令,然后选择想启用的 tour

相关文章
|
5月前
|
关系型数据库 网络安全 数据库
一些数据库设计的基本知识和学习指导
【6月更文挑战第17天】**数据库设计概览** - 从需求到结构,转化业务规则为关系型数据库。 - 遵循ER模型,定义实体、属性与联系。 - 步骤:需求分析、数据收集、ER图到物理设计,及优化。 - 范式理论确保数据无冗余,1NF至5NF逐步规范。 - 反规范化平衡查询效率与数据一致性。 - 优化策略:索引、简化查询、分区、延迟加载和并行处理。 - 安全措施:权限控制、加密、审计日志和防火墙。 - 实践与理解原理是成功设计的关键。
86 3
|
1月前
|
机器学习/深度学习 人工智能 Kubernetes
技术探索之旅:从基础到进阶的心得体会
本文记录了作者在技术领域的学习和实践过程中积累的经验与感悟。文章涵盖了从基础知识的学习、项目实践,到新技术的探索与应用,最终总结出几点对未来技术发展的思考。希望这些分享能够启发更多的技术爱好者,共同进步。
|
6月前
|
项目管理 调度
软件工程IT项目管理复习之 一:项目管理简介
软件工程IT项目管理复习之 一:项目管理简介
94 0
|
机器学习/深度学习 人工智能 达摩院
玩转达摩院MindOpt,动手实践指导
访问网址 https://opt.aliyun.com 使用MindOpt。动手实践,学习运筹学OR和机器学习AI相关技术。
236 1
|
搜索推荐
如何系统地学习IT技术:一篇指导初学者和有经验专业人士的博客
如何系统地学习IT技术:一篇指导初学者和有经验专业人士的博客
|
前端开发
前端知识案例学习13-技能条效果实现
前端知识案例学习13-技能条效果实现
85 0
前端知识案例学习13-技能条效果实现
|
小程序 程序员 Windows
学习经验
写写自己的学习经验
|
算法 搜索推荐 NoSQL
「编程羽录」上线,程序员必备的这些技能你能get到嘛?
大家好,我是小羽。好久不见,给大家带来个好消息,小羽的全新专题「编程羽录」系列正式上新,主要是介绍一些关于面试题和经验总结的文章。会为大家提供一些技术栈之外,程序员还需要的其他方面硬核知识...
178 0
「编程羽录」上线,程序员必备的这些技能你能get到嘛?
|
测试技术 开发工具 git
【手把手指导】给开源项目贡献代码
很多新人学习了技术,但是没有地方施展。
379 0
【手把手指导】给开源项目贡献代码
|
存储 算法 Ubuntu
学习 C++ 的一点浅薄经验
工作所需,需要学习下 C++,今天就谈一下自己是怎么快速学习 C++,并且在工作中实际上手开发的,希望能够给大家一些启发。
160 0