5 个实用的 VSCode 实时编码扩展

2025-05-25

5 个实用的 VSCode 实时编码扩展

直播开发过程会带来一些独特的挑战。除了要对一大群人进行长达数小时的讲解之外,你还需要与他们协作,尽最大努力让他们专注于任务,同时不让他们分心。

以下列出了我发现的 5 个对于克服这些挑战非常有用的扩展。

1. Twitch 荧光笔

线条荧光笔

这个很棒的扩展(由Live Coders队友Clarkio在 Live Coding 流期间制作)可以让观众帮助您调试代码 - 使用简单的聊天命令突出显示行!

缺少分号!line 36

2.括号对着色器 2

括号对着色器

在理想情况下,你的观众可以全程全神贯注地关注你。但现实情况是,他们可能也在忙着自己的项目、做饭,或者在办公桌前进行二次筛选。帮助你的观众快速地一眼就能理解正在发生的事情,即使他们把目光移开几秒钟,再回头看,或者看到一些括号或卷曲的动静,也不会感到迷失。

💡 PRO-TIP™ - 帮助观众更轻松地发现语法错误的扩展使群体编程和与观众一起调试变得更加容易!

3.待办事项+

todo+ 示例

使用这款极其实用但鲜为人知的扩展程序,您可以跟踪当前任务、想法、发现的 Bug 等。诸如alt+s“开始”、alt+d“标记为已完成”和alt+c“取消”等快捷方式使 TODO+ 成为一款易于使用的任务跟踪器。该扩展程序还支持复选框的自定义符号和自定义标签。

💡专业提示™ - 用列表来追踪直播任务和进度是不错的直播编码策略。观众经常会在直播中途突然中断,需要帮助来熟悉和跟上进度。直播结束后,可以用列表来写一篇回顾博客。

4.实时分享

实时分享

使用 Live Share 与直播嘉宾配对编程!这是一款出色的协作工具,也是每个 Live Coder 工具包中的必备工具。

5.评论锚点

评论锚点

这是另一个实用(但鲜为人知)的工具,可以帮助观众跟进并保持参与度。评论锚点还支持自定义标签和颜色,因此您可以使用它们来标记任何类型的评论!

💡 PRO-TIP™ - 如果您在流中感到迷失,请筛选侧栏中的“评论锚点”标签,查找待办事项并重构您可以关注的任务,直到您弄清楚下一步该做什么!

编辑:荣誉提名

我想用下面评论中来自 dev.to 社区的一些很棒的建议来更新这篇文章,我已经采纳这些建议并在 Twitch 上定期使用。

突出显示尾随空格缩进块突出显示

空格

感谢Juan Carlos提出的这些建议!这不仅能满足视觉需求,保持代码整洁,还能帮助查看器/聊天功能(尤其是在 Python 中,空格很重要!)

蛇道

蛇!

感谢Rich Somerfield开发了这个扩展。它太漂亮了!

分享你的最爱!

您最喜欢的 Live Coding 扩展是什么?

文章来源:https://dev.to/ninjabunny9000/5-useful-vscode-extensions-for-live-coding-239b
PREV
使用 CSS-Grid #gatsby-focus-wrapper、#___gatsby 将页脚保持在底部 { #gatsby-focus-wrapper 和 #___gatsby 是隐藏的 div,gatsby 将其注入到 html 和 body 标签之间的 DOM 中。
NEXT
2021 年需要掌握的 15 项高级 CSS 技术