首页 > 开发工具 > VSCode > 正文

VSCode的Quokka.js:实时的JavaScript/TypeScript草稿纸

P粉986688829
发布: 2025-12-22 14:12:08
原创
432人浏览过
Quokka.js 是 VSCode 中轻量高效的实时 JS/TS 运行插件,无需保存或切换终端即可即时查看执行结果、变量值和错误;支持 TypeScript、顶层 await 等新特性,提供响应式刷新、Live Comments、自定义期望输出(//?)等功能,单文件即可运行。

vscode的quokka.js:实时的javascript/typescript草稿纸

Quokka.js 是 VSCode 里一个非常轻量但极其高效的实时运行插件,它让你在编辑器里写 JS/TS 代码时,立刻看到执行结果,不用保存、不用切换终端、也不用配置运行环境——就像一张智能草稿纸。

安装与启用很简单

在 VSCode 扩展市场搜 “Quokka.js”,安装后重启(或直接启用)。新建一个 .js.ts 文件,右键选择 “Start on Current File”(或按 Ctrl+K Q),就能立刻看到每行代码的输出值、变量值和错误提示,悬浮在代码右侧。

支持 TypeScript 和 ES 新特性

只要项目里有 tsconfig.json 或已安装 typescript,Quokka 就能自动识别并编译 TS;也原生支持顶层 await、动态 import()、可选链、空值合并等现代语法。例如:

Google Antigravity
Google Antigravity

谷歌推出的AI原生IDE,AI智能体协作开发

Google Antigravity 277
查看详情 Google Antigravity
const user = { name: 'Alice', profile: { age: 30 } };
user.profile?.age // → 30(实时显示在行尾)
await fetch('/api/data').then(r => r.json()) // 顶层 await 直接运行
登录后复制

快速调试和探索式编程

  • 在任意位置插入 console.log() 或直接写表达式,结果实时可见
  • 修改变量或函数逻辑后,下方依赖它的计算会自动刷新(类似响应式)
  • //? 注释可自定义期望输出,Quokka 会比对并标出差异
  • 支持 Live Comments:在注释里写 JS 表达式,它会当场求值并显示结果

小技巧提升效率

  • Cmd/Ctrl+Shift+P → Quokka: New JavaScript File 快速开空白实验页
  • 在文件顶部加 // @ts-nocheck 可跳过 TS 类型检查(适合快速试 API)
  • 右键菜单里 “Run Selected Code” 只运行高亮部分,适合隔离测试某段逻辑
  • 配合 Jest 或 Vitest 的全局变量(如 describeit)也能识别并高亮测试状态

基本上就这些——不复杂但容易忽略的是:它不需要项目结构、不依赖 package.json,甚至单个 .js 文件也能跑起来。写算法、查 API、验证正则、调试异步链路,随手一写,结果就在眼前。

立即学习Java免费学习笔记(深入)”;

以上就是VSCode的Quokka.js:实时的JavaScript/TypeScript草稿纸的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号