我最早听说 superpowers 这个名字是在一次线上直播里某个讲师在 VS Code 里敲代码屏幕上的文字随着打字节奏微微跳动重点段落自动放大旁边还有一个干净利落的提示栏滚着演讲词。弹幕里一片“这是什么插件”有人回复了一个词——superpowers。当时我就记住了这个名字。后来自己装上、跑通、用进日常演示和直播编码之后才发现这远不止是一个“好看一点的主题插件”它本质上是一套把编辑器变成演示舞台的工具集适合做技术分享、直播写代码、录制视频教程、线上授课这类场景。这篇就跟你聊聊superpowers 到底是什么、怎么装、怎么配、怎么用以及我在实际使用中踩过的坑。1. superpowers 是什么一个让直播编码开挂的 VS Code 扩展1.1 一句话说清楚它是什么superpowers 是一个基于 VS Code 的扩展包官方定位是“给开发者的一套超能力工具”核心目标是把你的代码编辑器变成一个可以边走边讲的演示环境。装好之后你能在正常写代码的界面里直接切换出几种特殊的显示模式比如让字体瞬间放大、让当前代码块居中高亮、给窗口加上渐变遮罩只突出某一片区域甚至在敲击键盘时产生类似“能量爆发”的粒子动效。跟市面上的独立演示软件比如 Keynote、PowerPoint、Slidev不同superpowers 不要求你中途切换窗口也不用另外维护一套演示文件。你平时怎么敲代码演示时就怎么敲所有效果都叠加在真实编辑器之上。换句话说它把“写代码”和“讲代码”这两件事合并到了一起。1.2 它解决的到底是什么痛点我自己的经历是以前做技术分享幻灯片是一套代码是另一套。讲“这里有个函数”我得切到编辑器讲“这个设计模式解决了什么”又得切回 PPT。切换的时候观众最容易走神而且现场演示经常因为字体太小、窗口太乱、注意力被无关代码带走而效果打折扣。superpowers 很明显是为这几个痛点设计的。去掉幻灯片和代码之间的割裂感用一套界面讲完整个内容用“当前行放大”“虚化非重点区域”等方式模拟幻灯片聚焦的效果用内置的提词器、计时器、休息提醒解决演讲者需要同时管理内容节奏和代码展示的问题。如果你录过视频课应该也有同感录屏最怕切来切去一套工具能持续保持画面稳定观感会好很多。1.3 谁最需要这个工具如果你属于下面这几类人我觉得 superpowers 很值得一试技术讲师、培训师需要频繁展示代码并配合讲解做直播编码的主播希望画面好看、重点突出、流程不散录制视频教程的开发者不想花太多时间做 PPT 和后期剪辑内部技术分享的组织者经常要在会议上临时演示某个功能实现当然普通写代码的人也能用它。它的演示模式之外还有一个“Power Mode”风格的打字特效纯粹图一乐也很有意思。我自己的体会是它不挑使用者的技术栈不管你是写 JavaScript、Python 还是 Go核心功能都是建立在 VS Code 这个通用编辑器之上的跟语言几乎无关。2. 上手装好安装步骤、环境要求与首次配置2.1 安装之前先确认环境superpowers 是一个 VS Code 扩展包的集合安装的前提是你已经装好了 VS Code。这里有个容易踩的坑VS Code也就是大家常说的 Code和 Visual Studio简称 VS是两码事。superpowers 目前只支持前者也就是那个轻量编辑器不要下载错。另外superpowers 的底层渲染依赖 WebView 和自定义 UI对编辑器版本有一定要求。我个人建议把 VS Code 更新到当前较新的稳定版如果你长期不更新装完之后可能出现界面错位或命令不生效的情况。在 Windows、macOS、Linux 上我都试过整体表现一致没有特别的系统门槛。2.2 安装过程其实很简单安装方式有两种都是常规操作。第一种在 VS Code 左侧扩展商店里搜索“superpowers”找到对应的扩展包后直接点 Install。这里要注意识别作者信息因为它可能是多个扩展组成的包我建议认准扩展 ID 是“superpowers”开头的那个官方来源避免装到同名仿制插件。第二种打开 VS Code 的快速打开面板CtrlP 或者 CmdP输入以下命令回车后会自动跳转到对应扩展页面再从商店安装ext install superpowers装完之后VS Code 会提示重新加载窗口一般重载一次就能正常使用。整个过程大概不到两分钟不需要额外的环境变量、Node.js 依赖或者配置文件。这也是它比较友好的地方——新手上手成本很低。提示如果你所在的内网环境不允许直接访问扩展商店可以下载 VSIX 包离线安装。在 VS Code 的扩展面板右上角“... 菜单”里有“Install from VSIX”选项选择下载好的文件就行。这个方法我帮同事处理过几次很管用。2.3 第一次启动快速认识界面布局装好之后默认情况下你不会看到太多变化。直到你按下第一个快捷键或执行第一条命令superpowers 的界面层才真正接管编辑区域。建议你打开一个真实项目随便选一个文件然后按下CtrlAltPWindows/Linux或CmdAltPmacOS你会注意到编辑器进入了“Presenter Mode”也就是演示模式。在这个模式下界面会发生几个明显变化代码字号整体增大并且会自动重新排版减少换行断层当前光标所在行明显高亮颜色更深、更醒目右侧的面板被隐藏减少视觉干扰屏幕底部会出现一个细长的状态条显示当前时间、演示计时、下一段提示词你还会注意到主题整体变成了一个偏深色、高对比度的风格。这是 superpowers 附带的“演示专用主题”适合投屏和录屏。如果你想保留自己的习惯主题可以稍后在设置里关闭“演示模式强制主题”这一项但我的建议是先保留因为它对字体、间距、颜色的调整都是专门为演示优化的自己配出来的效果未必有这么干净。2.4 三个必调参数建议装完就改superpowers 开箱即用但有几个默认设置我觉得不太符合多数人的使用场景建议你装完立刻调整。第一个是“演示模式的默认字号缩放比例”。如果你投影仪分辨率不高比如 1080p默认放大的字号偏大代码一屏显示不了几行而如果你用 4K 屏幕直播默认字号又显得不够突出。我通常把缩放比例设为 1.5 到 1.8 之间具体数值按你录屏输出分辨率微调。第二个是“提词器位置的透明度”。默认提词器是一个半透明的悬浮栏放在屏幕顶部中间。这个位置在直播平台容易被自己的摄像头画面遮住放到底部又会被代码挡住。我个人习惯把它的透明度调到 60%位置放在编辑器右下角这样既能看到又不会抢焦点。第三个是“Power Mode 特效强度”。如果你喜欢打字粒子效果默认是开启的如果觉得太花哨可以关掉或者调低粒子数量。开着特效写代码确实有“superpowers”的爽感但长时间录课眼睛容易疲劳我一般开一档就行后面细说。把这三项设置好这时重新加载一下窗口工具的体感会立刻不同。我自己在第一次配置完之后明显感觉到“画面干净了很多效果指向性更强”后面再讲项目细节时专注度也会提高。3. 核心功能逐一拆解演示、动效、提词、计时3.1 演示模式代码当幻灯片用演示模式是 superpowers 最核心的能力它的设计思路是“让代码自己会讲”。在这个模式下你不需要再额外打开一个 PPT 文件。只需要把你准备讲的关键代码按顺序放在一个文件里讲一段、切一行光标走到哪哪里就放大高亮。它支持逐行聚焦按某个快捷键当前行会变得更加突出其余代码变暗这样观众视线会自然跟着你的讲解走。这个“聚焦”效果比你手动用鼠标选重要好很多。它采用的是“当前行 上下文”的逻辑不是简单地遮住其他内容而是让非重点区域保持一个可读但弱化的状态。观众能看清“代码在哪个函数里、上面是什么、下面是什么”同时又不会被无关细节带偏。我直播的时候特别喜欢这个效果因为它减少了“我刚才讲到哪了”的迷失感。更顺手的是演示模式支持“幻灯片式分页”。你可以把一份代码文件按照不同段落拆分用快捷键在“当前重点”之间跳跃相当于把代码文件直接变成了幻灯片页。跳转快捷键是AltPageUp和AltPageDown它会平滑滚动到对应代码区域并自动调整高亮。如果你在讲一个多文件项目也可以配合 VS Code 的标签页切换快速在不同文件间跳转每次都自动定位到你提前标记好的行。3.2 Power Mode视觉“爽感”的背后其实有讲究Power Mode 是很多人第一次用 superpowers 时最惊艳的功能。敲代码的时候光标周围会炸出彩色粒子切换主题时还有抖动、闪烁、背景冲击波等效果。说白了这就是一个打字反馈增强器让你每次按键都有“力量感”。但它的价值不只是观赏性。从教学和直播的角度看输入反馈是很重要的。你自己盯着屏幕时手指敲下去有没有被系统“确认”往往靠字符出现来感知但在直播场景中观众的注意力可能没有那么密集地盯着代码区动态特效就把“正在输入”这个信号放大了。尤其是讲解“你看这一步回车之后变量就生效了”这样的场景粒子爆发的一瞬间观众的注意力会自然被拉过来。不过有得必有失。Power Mode 开启时CPU 占用会明显上升尤其在低配电脑上连续打字时编辑器会有轻微延迟。我踩过这个坑第一次直播开满特效边写边讲到后半场发现风扇狂转画面偶尔掉帧。后来我把粒子数量从默认的 120 降到了 60平滑动画关闭速度就稳定了。如果你是录屏视频课程建议更克制一些毕竟后期看回放时花哨的特效反而会掩盖代码变化本身。3.3 提词器演讲者的隐形卡片superpowers 内置了一个“演讲提示”功能它可以让你在代码文件旁边配置一段独立的提示文字演示时这份文字只显示在你自己能看到的位置观众看不到。这个功能的设计非常聪明。它不要求你额外创建提词文件而是通过特殊注释块来标记。比如你在代码文件最上方写一个区块[//]: # (SP-NOTE: 大家好今天我们要讲的是如何用 superpowers 改造直播流程。) [//]: # (下一步先演示普通模式再切入演示模式。)演示时这个提示会以半透明浮层的形式显示在屏幕角落。你只要瞄一眼就能知道下一步怎么讲不用背稿也不用在另一个窗口里放一份讲稿。加入新提示后可以用快捷键切换提示内容它会按顺序一条条展示相当于一个同步的“逐页讲稿”。我实际用下来这个功能比想象中更省心。以前录课我要么在手机里放提纲要么在另一个显示器上挂一个提醒窗口总是会低头看影响节奏。用 superpowers 之后提示就在编辑区边上视线不用离开代码语气就自然很多。唯一的注意点是提示区块不要写太多内容每条控制在 20 个字以内不然演示时你会在“读提示”而不是“讲代码”。3.4 计时器与休息提醒控制分享节奏的小管家演示最怕超时。superpowers 内置了一个简洁的计时器会显示在演示模式的底部状态栏里。你可以在开始演示前手动清零也可以设置一个提醒时间比如 20 分钟或者 30 分钟。到达设定时间后它会以不打扰画面的方式弹出一条通知不会突然跳全屏观众几乎感知不到但你自己能清楚知道节奏到了。这个功能对内部技术分享特别合适。很多公司内部开会时间都是卡死的超时几分钟后面的人就等得很焦虑。我一般设置 25 分钟倒计时到点后如果还在讲结尾就提前收尾如果还剩一个重头戏没讲就会跳过次要细节用提词器里的“下一步”直接跳到结论部分。这种有节奏的收放只有真正用工具辅助过的讲师才能体会。另外还有休息提醒这是我的意外收获。有一次录一节长课我连续讲了快两个小时完全没意识到已经头晕了。superpowers 到点会弹窗提示“站起来休息一下”。这个小功能看似简单实际上对直播、录课这类长期对着屏幕的人来说算是比较贴心的设计。久坐和连续用眼本来就是内容创作者的职业风险有提醒总比没有好。4. 实战完整跑通一次“直播编码 线上分享”4.1 以终为始先规划演示流程在打开编辑器和扩展之前我建议你先花 10 分钟把分享流程写下来。不用写详细稿只要把“要讲的几个关键代码片段、每个片段想突出的重点、以及每一段的过渡话术”理一遍。superpowers 帮的是把代码展示做干净但内容逻辑本身还是要靠你自己规划。我的习惯是新建一个项目文件夹里面放两个文件——talk.md和demo.ts。talk.md里用列表写下每个环节的提示词demo.ts里按演讲顺序放置代码块每一段之间用注释分隔。这样在演示时我的“文件切换”全部都在一个项目里不会出现找不到文件的情况。选定一个入口文件之后再打开演示模式先把整个流程快速走一遍。这个过程很重要就像彩排。你会发现有些代码块太长一屏放不下有些注释行太占位置分散注意力。该精简的精简该拆开的拆开。我在一次内部培训中第一次跳过彩排结果讲到中间才发现某个函数在屏幕边缘被截断了重新手动滚动代码很狼狈。从那以后每次使用 superpowers 前我都会提前跑一遍演示。4.2 直播编码实操从开始到结束的完整路径接下来我以一次直播为例写一遍完整的实操路径你可以照着来。第一步启动场景。打开项目按CtrlAltP进入演示模式。这一步会让编辑器进入演示专用主题同时隐藏一些干扰面板。如果你有桌面小组件、浮动终端、任务栏提醒等建议提前手动处理一下。不是 superpowers 管不了它们而是它只负责编辑器内部的排布。第二步调整窗口布局。把 VS Code 窗口最大化或者设置成你录屏预留的尺寸浏览器标签栏、书签工具栏都收起来。如果你的直播画面是竖屏需要把侧边栏折叠只保留代码区域用快捷键CtrlB切换侧边栏的显隐。根据你直播设备的分辨率可能需要微调编辑器字号这里我不建议用整体缩放快捷键而是回到设置里调“演示模式缩放比例”更稳妥。第三步规划提词。把talk.md文件打开到侧边预览区选中你要用的提示内容用前面提到的标记方式把它粘贴到代码文件顶部注释块。这样你在正式演示时不用在文件之间跳来跳去就可以看到下一步提示。第四步开始演示。按下F5或者扩展状态栏里的开始按钮计时器开始走动。讲到哪里就把光标移到对应代码行必要时按聚焦快捷键强调重点。如果观众提问需要临时跳着讲可以用AltPageDown/Up快速跳转代码块不用一行行滚动。第五步收尾。讲完最后一个代码块后关闭演示模式恢复普通编辑界面。如果需要单独分享“总结页”或者“QA”信息你可以准备一段放在注释块里的提示词把字号放大成一个夸张的比例作为临时的“幻灯片尾页”用。4.3 和 OBS 配合录视频的一些心得很多做教程的人会问superpowers 能不能跟 OBS 一起用答案当然是可以而且配合起来很顺手。因为 superpowers 的展示完全在 VS Code 窗口内所以 OBS 只需要一个“窗口捕获”源选中 VS Code 窗口即可不需要复杂的插件或虚拟摄像头。这里有一个重要的细节OBS 窗口捕获有“捕捉特定窗口”和“捕捉整个显示器”两种方式。如果你的直播画面包含自己出镜的摄像头千万不要用“整个显示器”因为你会把其他的信息一起录进去。我建议用“窗口采集 裁剪”把 VS Code 的代码区域作为主体留出合适的上下边界摄像头画面以画中画形式叠加在旁边。你可以在 OBS 里给 VS Code 窗口加一个轻微的滤镜或者边框让它和背景融合更自然。另一个容易忽略的点是帧率。superpowers 的动态特效在 30fps 下播放其实也能看但很多 CSS 动画和粒子效果在 60fps 下才会显得流畅。如果电脑配置允许我建议直播推流帧率设置成 60编码器选择硬件编码NVENC 或 AMD 的对应方案这样不管是代码滚动还是粒子特效画面都会顺滑很多。我这里没有让你盲目提高码率只是提醒你如果你的画面经常出现撕裂、卡顿先降低 Power Mode 的粒子数量再考虑调推流参数。注意演示过程中不要随便切换 OBS 场景容易导致窗口采集源闪烁或者重新加载。如果你需要在中途展示浏览器或其他软件最好额外准备一个“录屏中断”的过渡画面等切回来再继续演示。4.4 小屏笔记本用户怎么优化体验用 13 寸笔记本做直播或分享屏幕空间确实受限。我自己有一段时间只用笔记本外接一个便携屏发现几个很值得分享的技巧。设置里把侧边栏默认隐藏只在需要文件树时手动打开底部的面板同样收起来必要信息都放到悬浮提示里。字体大小不要盲目调大优先保证“每行代码在 1080p 下能完整显示”我一般把字号设置为 15 到 16 号缩放比例 1.3 左右。如果代码行还是超出屏幕可以用“自动换行”功能但注意自动换行在演示时代码阅读性差一点因为它会打断缩进结构。我更推荐提前把代码手动拆成几行别让一行太长。另一个技巧是使用“工作区多根目录”。如果演示涉及前端、后端多个代码库可以同时把这些文件夹添加进来用文件树在项目之间快速跳转。superpowers 的演示模式支持标签页切换所以只要文件已经在 VS Code 里打开切换到哪个都是一个快捷键的事。这样一来即使笔记本屏幕小也不会显得手忙脚乱。5. 常见问题与排查技巧实录5.1 装完之后没反应先查这三个地方我遇到最多的问题是“插件装了但什么效果都没有”。大部分情况不是扩展没工作而是你还没触发它。superpowers 默认不会自动进入演示模式需要手动按一次快捷键或者执行命令。如果快捷键没反应试试在命令面板CtrlShiftP里输入superpowers看相关命令是否出现。如果命令面板能看到命令但执行后没有视觉变化第二步检查是不是有主题或扩展冲突。某些“自定义 CSS/JS 加载器”类的扩展会把编辑器和 WebView 的样式强行改写导致 superpowers 的界面渲染异常。你可以临时禁用所有非必要扩展只保留 superpowers再测试一次。定位到冲突扩展后给它加一个排除规则或者干脆在演示模式下禁用。还有一个不太起眼但很常见的原因VS Code 窗口没有重新加载。安装在很多扩展尤其是会注入自定义视图的之后都需要完整重载窗口。按CtrlShiftP执行 “Developer: Reload Window” 强制刷新很多奇奇怪怪的失效问题都会消失。5.2 演示时风扇狂转、掉帧卡顿这大概率是 Power Mode 的粒子特效导致的。它默认开启的粒子数量在低配机器上负担比较大。进入设置搜索superpowers找到粒子数量相关的配置项把数值从默认下调到 50 到 80。同时把“打字时编辑器抖动”效果关闭。这个抖动虽然很带感但在演示场景中会让观众头晕我自己也推荐直接关掉。如果卡顿发生在滚动代码或者切换文件时那可能不是特效的锅而是硬件加速问题。检查 VS Code 设置里是否禁用了 GPU 加速或者你用的是某些远程开发模式比如 SSH Remote。远程开发时所有界面渲染都在服务器端或本地转发层发生演示特效的体验确实会打折扣我建议在远程连接场景下降低期望或者干脆只在本地演示。5.3 字太小/太大、高亮不跟随光标这个问题的本质是缩放比例没跟你的屏幕分辨率匹配。在演示模式中按住Ctrl滚动鼠标滚轮可以临时调节整体大小。如果你对当前效果满意记住当前的缩放值去设置里填成固定的数值。否则下一次进入演示模式它又会回到默认比例。光标高亮不跟随多数是因为你把光标移动到了“聚焦”区域之外。superpowers 的聚焦效果默认只作用于当前编辑器的活动光标位置当你点击了其他面板比如终端、侧边栏再切回来光标位置可能不变但高亮状态恢复了需要再点一下代码区域。如果还是不跟随检查是否有“光标平滑”类的扩展抢占了事件。这个我不太好说绝对但我自己遇到这个问题时禁用了一个光标平滑扩展后就好转了。5.4 常见问题速查表问题现象可能原因解决办法安装后无任何变化未触发快捷键按 CtrlAltP 或命令面板搜索 superpowers命令找不到插件未安装成功重载窗口或重新安装扩展包演示模式字体过小缩放比例默认值不适合屏幕按住 Ctrl滚轮调整后保存设置界面闪烁/样式错乱与其他注入 CSS 的扩展冲突临时禁用其他无关扩展重载窗口测试打字卡顿Power Mode 粒子数量过高调低粒子数量关闭抖动效果提词器看不到透明度设置过低/位置被遮挡调整提词器的透明度和停靠位置高亮不跟随焦点不在编辑器内鼠标点击代码区域恢复焦点这个小表是我经常发给同事的“急救卡”一般能解决 90% 的使用问题。剩下的 10% 基本都出在和自身工作流的配合上需要你根据自己的习惯慢慢调。6. 最后再分享一个我私藏的小技巧真要说 superpowers 最打动我的地方不是某一次惊艳的粒子特效也不是字号放大的反馈而是它逼着我重新审视“分享代码”这件事。过去我准备了太多花哨的 PPT 和复杂的转场却忽略了代码本身才是观众最想看的。装了 superpowers 之后我反而开始写更干净的代码、拆更短的函数、在注释里留更有价值的说明——因为我知道现场演示时每一个字符都会被放大到观众眼前。如果你也打算把这套工具用起来我建议从一次内部小范围分享开始不要直接上大型直播。先拿一个熟悉的小项目试半小时把演示模式、提词器、计时器都过一遍感受一下“讲代码”而不是“读代码”的节奏差异。等你有了一次成功的体验后面再逐步叠加各种特效和场景就会心里有数得多。工具能给的是“超能力”但真正把能力用好的还是你对自己内容的理解和准备。