干技术分享这行当久了你迟早会碰上一个让人头疼的场面线上会议里共享屏幕讲代码观众留言说字太小看不清能让我自己往后翻吗你切文件切太快了我跟丢了。你在这头吭哧吭哧地切窗口观众在那头对着糊成一团的屏幕干瞪眼。我之前几次线上工作坊就是这么被折磨过来的直到后来用上这个叫 Superpowers 的 VS Code 扩展才算把演示代码这回事理顺了。这里说的 Superpowers指的是 Visual Studio Code 上那个专门做技术演示、直播编码和远程教学的扩展不是别的同名软件。它的核心思路很直接在本地拉起一个网页服务把编辑器里的代码文件以高亮、可缩放、可独立滚动的方式呈现在浏览器里观众通过访问一个地址就能看到你的代码而不再依赖模糊的屏幕共享。它适合做线上技术分享、直播编程、培训录课、远程工作坊、代码评审讲解的任何人。安装确实是一行命令的事但要用得顺、用得专业背后有不少配置细节和演示编排技巧。这篇文章我就从原理讲到实操把安装、配置、演示流程、常见坑全部过一遍你看完直接照着做就行。1. 为什么需要 Superpowers传统屏幕共享的三个死穴1.1 字太小、滚动不同步、切换太快先说说我原来是怎么讲代码的打开腾讯会议或者 Zoom共享整个屏幕然后把编辑器窗口放大到 120%再手动把字号调到 18 甚至 24。观众那边是什么体验我用一个测试账号进去看过诚实地讲惨不忍睹。1080p 的屏幕再经过视频压缩代码里的{}和()基本糊成一团缩进的空格也看不清更别提终端里的彩色输出压缩之后全是色块。更麻烦的是滚动不同步。我讲一个长函数从上往下滑观众那边的画面是有延迟的、有跳变的而且他们只能看不能自己动手去翻前面的内容。有人提问你刚才那个函数开头的参数列表是什么我只能再滚回去大家一起等我找位置。还有文件切换。一旦开始多文件讲解A 文件到 B 文件到 C 文件来回跳远程观众看着满屏乱切跟看快进视频一样两分钟就晕了。这些问题不是会议软件不给力而是屏幕共享这种形态天然不适合代码演示。代码是需要被阅读的不是当视频看的。Superpowers 的解法就是把共享你的屏幕换成共享一个实时更新的网页。1.2 网页渲染代码的优势在哪Superpowers 在本地开一个 HTTP 服务把当前工作区里的代码文件渲染成带语法高亮的网页。这个页面的行为逻辑和普通网页一模一样可以滚动、可以缩放、可以切换文件、甚至可以跟随你的光标。这意味着观众端的代码是高保真的不是视频压缩后的观众可以自己滚动回看不用求你滚回去一下演讲者这边切文件观众那边跟着切但每个人还可以独立调整字号。说白了它把演示从单向视频流变成了可交互的文档。这里要强调一个理念演示工具的终极目标不是把画面传过去而是把注意力传过去。你希望观众把精力放在代码逻辑上而不是放在看清字上。Superpowers 做的就是这件事——把看的成本降到最低。2. 安装与首次启动5 分钟跑起最小可用环境2.1 扩展安装与版本选择安装没有悬念。打开 VS Code进扩展市场搜索 Superpowers认准作者是 Jeroen这个扩展在开发者圈子里口碑很好点安装即可。也可以用命令面板直接装ext install superpowers如果你是在命令行环境里操作也可以先进入扩展目录再执行上面的命令效果是一样的。装完之后重启窗口一般会自动激活不需要额外配置。有一个小建议如果你平时用的 VS Code 版本比较老建议先把编辑器升级到较新的稳定版再装这个扩展。我遇到过老版本在渲染一些 ES 语法高亮时偶发卡顿的情况升级后就没再出现。提示安装后可以在扩展设置里确认一下版本号。如果遇到功能按钮找不到的情况多半是扩展没完全加载重载窗口CtrlShiftP输入Reload Window基本都能解决。2.2 第一次启动命令面板走一遍流程完整跑通一次需要三步分别在命令面板里输入 Superpowers 开头的命令就行Superpowers: Start server启动服务Superpowers: Open in browser打开浏览器预览Superpowers: Stop server演示结束后关闭第一次启动时编辑器底部会弹出一个提示框显示当前服务的地址通常是这种格式http://localhost:8080端口默认为 8080如果被占用扩展会自动尝试别的端口。浏览器打开的页面里左侧是当前打开的文件清单右侧是代码正文。你切换编辑器里打开的文件网页会跟着切换你在编辑器里滚动浏览器页面也会做相应滚动默认开启跟随模式。我当时第一次跑通这个流程的感受是原来把代码给观众看可以这么清爽。本地起服务不经过任何第三方中转数据只在你自己的局域网或本机跑。2.3 最小可用的配置文件首次启动其实不需要任何配置但你至少要知道三个关键设置后面会常用到{ superpowers.http.port: 8080, superpowers.http.address: 0.0.0.0, superpowers.mode: follow }superpowers.http.port服务端口。默认 8080冲突时改 8090、9000 之类的都可以。superpowers.http.address监听地址。默认是127.0.0.1只允许本机访问。如果你要局域网内的其他设备访问需要改成0.0.0.0。这是我最常提醒人的一个坑很多人说观众打不开页面十有八九就是地址没放开。superpowers.mode默认模式。follow表示观众端默认跟随演讲者滚动也可以设置成free让观众默认自由翻阅。这三个字段理解到位基本就有能力跑一次正经的演示了。更完整的配置项在后面第 4 章展开。3. 核心功能逐个拆解从跟场演示到互动问答3.1 跟随模式与独立浏览模式的核心区别Superpowers 最人性化的设计就是双模式切换。follow模式下演讲者翻页、滚动、切文件观众页面同步执行同样的动作——适合讲主线逻辑带着大家一口气看完。free模式下观众可以自由滚动自己的页面不受你操作影响——适合互动答疑、回头翻代码细节。我自己的使用习惯是默认开follow讲主线讲到一个段落结束或者有人提刚才那个地方是什么来着我会切到free让大家自己看同时口头补充解释。这个切换不需要在服务器端操作观众端页面上就有个跟随开关按钮自己点一下就能切换。听起来很小但这个细节解决了远程演示里节奏的大问题。3.2 字号缩放、光标隐藏、行号开关的演示细节代码演示最容易被吐槽的就是字号。Superpowers 在浏览器页面上直接支持快捷键缩放跟浏览器本身的Ctrl 加号/减号一样顺手但它是针对代码区域独立缩放的不会把导航栏一起放大。实测下来把字号放大到观众能看清我一般会调到平时编辑器的 1.6 到 2 倍也就是浏览器页面上按五六次放大键的样子。还有三个细节设置直接影响专业度隐藏光标有些演讲者不喜欢观众看到自己在代码里的光标轨迹光标一抖一抖的很分散注意力。可以设置superpowers.hideCursor为true。隐藏行号讲算法、讲解题思路时行号是很好的定位参照但讲代码风格时行号显得多余。通过superpowers.hideLineNumbers控制我一般保留行号方便说看第 42 行。当前行高亮这是我最喜欢的功能之一。跟随模式下观众页面会高亮你正在编辑的那一行代码让人群的视线集中在一点而不是满屏乱扫。这些设置都可以在 settings.json 里写死也可以演示中途通过命令面板临时切换。临时切换的命令你多用几次就能形成肌肉记忆。3.3 Markdown 幻灯片模式把代码块串成整场演讲Superpowers 不只是共享代码文件它还能把 Markdown 文件渲染成类似幻灯片的页面。你在当前文件里用!SLIDE这样的标记分隔内容每一段成为一个幻灯片页浏览器端提供翻页操作。我一开始觉得这功能鸡肋程序员讲东西谁用幻灯片啊直到一次远程培训我需要先花 20 分钟讲概念、再讲代码才发现这个概念阶段配上几张干净的大字幻灯片效果比直接怼代码好太多。幻灯片页里可以放文字、放图片引用、放代码片段而且代码片段同样支持语法高亮。等于一场分享从头到尾Superpowers 一个工具就全覆盖了概念部分用幻灯片代码部分用实时编辑器。3.4 徽章、进度条与聊天互动提升观众体验的小插件Superpowers 还有几个增强演示体验的小功能徽章badges可以在页面上方显示你预设的文字比如在线答疑中欢迎提问进度条可以显示当前页在整个大纲中的位置让观众心里有数讲到哪了。这些都不是必需功能但用好之后观众的参与感会明显提升。聊天互动方面扩展本身支持接入聊天服务但在纯局域网演示场景里我通常不折腾这块直接在线上会议软件的聊天区回答问题就够了。这个根据你自己场景取舍不必为了功能齐全而把环境搞复杂。4. 实操配置详解把工作区调到演讲状态4.1 推荐的 settings.json 完整配置为了保证每次演示开箱即用我会在工作区的.vscode/settings.json里放一份专门的配置而不是改全局设置。这样换一台电脑、换一个项目只要打开这个工作区所有演示相关配置自动生效{ superpowers.http.address: 0.0.0.0, superpowers.http.port: 8080, superpowers.mode: follow, superpowers.hideCursor: false, superpowers.hideLineNumbers: false, superpowers.include: [**/*.js, **/*.ts, **/*.py, **/*.md, **/*.json], superpowers.ignore: [**/node_modules/**, **/.git/**] }几个字段逐一说include和ignore是文件可见范围的白名单和黑名单。默认会显示工作区所有文件但如果你的项目里有一整个node_modules那文件列表必然是灾难。我通常把依赖目录和构建产物排除掉。hideCursor我习惯保留光标因为我讲代码喜欢用光标引导视线。如果你录课回放或者现场容易手抖可以考虑隐藏。port固定用 8080方便提前把访问地址发给观众不用每次开会前再确认端口。这套配置最核心的价值是确定性每次演示环境都一样不会出现上次能访问这次不行的玄学问题。4.2 演示工作区的文件组织套路演示效果好不好文件整理占一半。我现在的标准做法是在项目根目录建一个demo文件夹把所有要讲的文件按讲解顺序编号demo/ 01-intro.md 02-core.py 03-utils.py 04-demo-run.py这样做的好处有两个。第一浏览器左侧的文件列表天然就是你的演讲大纲名字排得整整齐齐观众扫一眼就知道今天的结构比临时在代码和笔记之间切换要专业得多。第二你本人切文件也不会乱按数字顺序讲即可。另外讲到一个涉及终端命令的文件时我会把终端也纳入演示流程先跑一半代码再切到终端看输出。Superpowers 的网页端主要管代码文件终端画面还是要靠会议软件共享所以我会把那部分需要展示终端操作的环节单独规划好时间避免临时出现找不到终端窗口的尴尬。4.3 局域网内观众访问地址的计算与验证如果你要给线下同一房间的人演示或者线上会议中观众需要自己打开页面就需要让对方访问你的局域网地址。做法是把你电脑的局域网 IP 找出来Windows 上ipconfigmacOS/Linux 上ifconfig或ip addr然后用IP 加端口拼出完整地址http://192.168.1.100:8080第一次验证很重要。自己先在手机浏览器上打开这个地址能正常看到代码页面再发给观众。如果手机打不开最常见的原因是系统防火墙拦截了 8080 端口需要放行其次是上面说的superpowers.http.address没有改成0.0.0.0。注意这个地址只在同一个局域网内有效。讲线上直播课的时候远程观众和你不一定在同一网络所以那种场景下我还是建议用会议软件的屏幕共享来播终端而代码主画面让观众用 Superpowers 页面配合看效果最好。5. 常见问题与排查技巧实录5.1 观众打不开页面的排查顺序这个问题我在线下工作坊被问过太多次直接给排查清单现象可能原因解决办法本机能打开手机/他人打不开监听地址是 127.0.0.1设置superpowers.http.address为0.0.0.0并重启服务地址正确但连接超时防火墙拦了端口放行对应端口或临时换一个端口端口被占用启动失败别的服务占了 8080换端口并同步修改访问地址观众打开是空白页文件路径含特殊字符或编码问题检查工作区路径是否含中文/空格必要时重命名一条通用排查原则先在服务端本机访问http://localhost:8080确认服务正常再去观众端排查。服务端不行就先解决服务端服务端行而观众端不行再按网络和防火墙的方向查。千万不要两头同时改配置否则出了问题你根本不知道从哪开始查。5.2 字体大小、图片、样式的调整心得浏览器端字体调好了但每次重新打开页面又恢复默认这个正常情况下是浏览器没记住缩放设置手动再调一次就行。我遇到更隐蔽的问题是 CSS 样式Superpowers 支持自定义主题 CSS但如果你在工作区里放了其他 CSS 文件偶尔会被误加载导致页面样式错乱。我的建议是自定义样式只写在扩展指定的样式文件里不要在工作区随意摆放同名 CSS。图片路径也是个常见的坑。Markdown 里引用的图片如果是相对路径Superpowers 默认可以显示如果用了系统绝对路径或者远程图床可能加载不出来。提前在本地把图片准备好放到演示目录下用相对路径引用是稳定性最高的做法。5.3 与录屏、直播软件配合时的注意事项同时开 Superpowers 和录制软件我吃过一次亏录出来的视频里浏览器页面的滚动和实际讲解对不上因为录制软件抓取的是浏览器窗口而 Superpowers 页面有自己独立的渲染节奏。后来总结出来的经验是录课时不要用跟随模式 观众自由缩放的组合因为观众的自由操作你自己看不见录出来会显得画面乱动。录课建议开follow模式自己在编辑器里操作让浏览器页面跟着走画面稳定可控。另外直播时如果要做画中画摄像头 代码页注意浏览器页面的渲染区域要留出足够的底部空间不然被摄像头遮挡住关键代码。我是习惯把代码字号调大一点然后把摄像头窗口放在右下角避开左侧文件列表和顶部导航栏。5.4 性能与稳定性的实测心得用了两年多我的实际感受是它足够轻但你要给它干净的运行环境。开着一个巨大的 monorepo 工作区几万个文件再启动 Superpowers文件列表的索引会有明显延迟。解决办法就是前面说的ignore配置把大目录排掉。长时演示超过 2 小时稳定性的关键因素反而不是 Node 服务本身而是你的电脑别在演示中途做系统更新、杀毒扫描之类的重活。我有一次演示到一半风扇狂转页面切文件明显卡顿最后发现是后台在跑索引和备份任务。演示前把这些都关掉体验会好很多。6. 进阶玩法与个人心得6.1 配合自动刷新和分屏做代码 运行效果同屏演示讲前端代码或者脚本运行结果时我摸索出一个组合玩法Superpowers 显示代码同时在编辑器里打开内置终端跑命令再用会议软件共享一个窄条的终端窗口区域。这样观众看到的是左边浏览器页面上是清晰的代码右边一小条是运行输出。比起传统整屏共享代码清晰度和可读性都高很多。如果你讲的是前端项目还可以配合自动刷新类工具改完代码浏览器自动刷新Superpowers 页面同步更新观众实时看到修改效果。这个组合我用来讲过几次纯前端分享反馈都很不错。6.2 远程工作坊与线上分享的节奏编排建议Superpowers 改变了演示节奏的可能性所以我编排内容时会有意识地利用它的特性前半场用follow模式我控制节奏保证大家看到的是同一条主线中场答疑切成free让观众自己去翻代码我口头答疑后半场回到follow继续往下推进。这比传统一镜到底式的共享屏幕舒服太多。观众不会因为中间停下来提问而错过后面内容因为他们在自由模式下已经自己看过了能跟上你的进度。甚至有人会在自由模式下提前往后翻看到后面的答案然后提问更深入的问题——这对我来说是好事说明大家在主动思考。如果是较长时间的培训我会在开始前把访问地址和简单的操作说明发给每位参与者就一段话打开地址默认跟随想自己看就点自由模式。运行的效果比发一堆幻灯片文件好得多。6.3 我踩过的坑和总结的经验最后分享几个只有实战才能踩到的教训。第一演示开始前一定要自己用手机或另一台电脑完整走一遍观众流程别只看本机浏览器这能发现 80% 的访问问题。第二局域网地址要在演示当天重新确认一遍因为 DHCP 可能会换 IP前一天发给大家的地址可能已经失效。第三准备一个备用的无线路由或热点万一现场网络崩了至少能换到自己的热点上继续。还有一条个人的经验别把精力全花在工具上工具再好也只是辅助真正的核心还是你讲的代码本身有没有价值。Superpowers 让我把让观众看清代码这个负担从肩膀上卸下来我才有更多心力去琢磨怎么把逻辑讲透怎么设计练习。这也是我愿意到处推荐它的原因——它不是一个炫技玩具而是能实打实提升演示质量和分享效率的基础设施。如果你经常要做技术分享装一个认真配置一次后面每一次演讲都会受益。